Foundation - 构建语义

使用一组 SASS 混合，生成了一个网格 CSS，该网格用于构建你自己的语义网格。

行

grid-row() 混合用于创建行。

.container {
   @include grid-row;
}

列

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

.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() 混合暂时更改网格上下文。与 breakpoint() 混合配对，你可以使网格响应。

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