12 跨度网格

另一个经典款：12 跨度网格。您可以使用 repeat() 函数在 CSS 中快速编写网格。对网格模板列使用 repeat(12, 1fr); 可生成 12 列，每个 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
}