Foundation - 语义构建

使用一组 SASS 混合函数，生成一个网格 CSS，用于构建您自己的语义网格。

行

使用 grid-row() 混合函数创建行。

.container {
    @include grid-row;
}

列

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

.container {
    @include grid-column;
    //设置 100% 列数
    
    @include grid-column(3);
    //设置列数 25%
    
    @include grid-column(25%);
    //设置列数百分比
    
    @include grid-column(1 of 7);
    //为列设置自定义分数
}

网格列也可以作为函数访问。百分比值是在没有任何网格列 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);
   }
}

foundation_the_grid.html