12 度格線

另一種經典：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; 會橫跨前四個。

另一種寫入方式是使用 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
}