Foundation-building-semantically

基礎-意味的に構築

SASSミックスインのセットを使用して、独自のセマンティックグリッドを構築するために使用されるグリッドCSSが生成されます。

Rows

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