css - 使用 CSS Grid 每行不同的列集

Question

我正在尝试创建一个看起来像这样的网格，

第一行两列，第二行三列。它们的宽度应该相等，但我的绘画技巧不是最好的。

我试图通过在“Kort”细胞上用类似的东西靶向特定细胞来实现这一目标，

  grid-row: 1; 
  grid-column: 2/4;

但我似乎无法做到这一点。任何帮助是极大的赞赏。

Answer 1

正如 TemaniAfif 在评论中指出的那样，为了实现类似 CSS 网格的布局，您首先必须制作 6 列，然后让第一行中的两个元素各占 3 列，而这三个元素在第二行中，每行取 2 列。

一个例子:

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

.first-row-item {
  grid-column: span 3;
}

.second-row-item {
  grid-column: span 2;
}

/* Stylistic, dont' mind: */
.item {
  border: 2px solid gray;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 0;
}

<div class="grid">
  <div class="item first-row-item">1</div>
  <div class="item first-row-item">2</div>
  <div class="item second-row-item">3</div>
  <div class="item second-row-item">4</div>
  <div class="item second-row-item">5</div>
</div>