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);
   }
}