CSS 网格每行的不同列集

Question

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

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

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

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

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

Answer 1

您必须将每一行切成 6 列，以便使第一行显示在 2 列 (3 + 3) 中，第二行显示在 3 列 (2 + 2 + 2) 中

网格从 1 开始，而不是从 0 开始。

.col1 的 grid-column-start 是从 1 到 4 的 3 列（总共 3 列）

对于 .col2 是从 4 到 7（共 3 列）

对于.col3是从1到3（总共2列）

对于 .col4 是从 3 到 5（共 2 列）

.col5 是从 5 到 7（共 2 列）

.rows {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; display: grid;
}
.rows div { border: 1px solid #000;}
.rows .col1 {  grid-column-start: 1;
    grid-column-end: 4; }
.rows .col2 {     grid-column-start: 4;
    grid-column-end: 7; }
.rows .col3 {     grid-column-start: 1;
    grid-column-end: 3; }
.rows .col4 {     grid-column-start: 3;
    grid-column-end: 5; }
.rows .col5 {     grid-column-start: 5;
    grid-column-end: 7; }

<div class="rows">
  <div class="col1">1</div>
  <div class="col2">2</div>
  <div class="col3">3</div>
  <div class="col4">4</div>
  <div class="col5">5</div>
</div>