12 スパンのグリッド

もう 1 つの定番は 12 スパンのグリッドです。repeat() 関数を使用すると、CSS でグリッドを簡単に記述できます。グリッド テンプレート列に repeat(12, 1fr); を使用すると、それぞれ 1fr 列が 12 個になります。

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

これで、12 列のトラック グリッドができたので、そのグリッド上に子要素を配置できます。グリッド線を使って配置する方法があります。たとえば、grid-column: 1 / 13 は最初の行から最後の行（13 列目）までをまたいで、12 列にまたがります。grid-column: 1 / 5; は最初の 4 つにまたがります。

span キーワードを使用して記述することもできます。span では、始点と、その始点から広がる列の数を設定します。この場合、grid-column: 1 / span 12 は grid-column: 1 / 13、grid-column: 2 / span 6 は grid-column: 2 / 8 と同等になります。

.child-span-12 {
  grid-column: 1 / span 12;
}

HTML

 <div class="parent">
  <div class="span-12 section coral">Span 12</div>
  <div class="span-6 section green">Span 6</div>
  <div class="span-4 section yellow">Span 4</div>
  <div class="span-2 section blue">Span 2</div>
</div>

CSS

        .parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.span-12 {
  grid-column: 1 / span 12;
}

.span-6 {
  grid-column: 1 / span 6;
}

.span-4 {
  grid-column: 4 / span 4;
}

.span-2 {
  grid-column: 3 / span 2;
}

/* centering text */
.section {
  display: grid;
  place-items: center;
  text-align: center
}