点击这里

使用SASS mixins集合，生成网格CSS，用于构建自己的语义网格。

行

grid-row() mixin用于创建行。

.container {
   @include grid-row;
}

列

grid-column() mixin用于创建列。 可以用多种方式定义列的宽度。

.container {
   @include grid-column;
   //sets 100% column count
   @include grid-column(3);
   //sets column count 25%
   @include grid-column(25%);
   //set percentage for column count
   @include grid-column(1 of 7);
   //custom fraction is set for columns
}

网格列也可以作为函数访问。 在没有任何网格列CSS的情况下给出百分比值。

.main-content {
   width: grid-column(1 of 7);
}

多个网格

$grid-column-count默认设置所有网格的列数。 它可以在行的实例中重写。

.container {
   @include grid-row(16) {
      .main-content {
         @include grid-column(5);
      }
      .sidebar {
         @include grid-column(11);
      }
   }
}

在不输出任何行CSS的情况下，您可以使用grid-context() mixin临时更改网格上下文。 与breakpoint() mixin配对可以使网格响应。

@include grid-context(7) {
   .sidebar {
      @include grid-column(4);
   }
}