使用 CSS Grid 每行不同的列集

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>

Answer 2

正如 TemaniAfif 在 cmets 中指出的那样，为了使用 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>

Answer 3

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-flow:row;
  gap: 1rem;
  
}
.col {
  grid-column: span 2;
  background: red;
  width: 100%;
}
.col:nth-child(5n+4) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}
.col:nth-child(5n+5) {
  grid-column: span 3;
  background: blue;
  width: 100%;
}

<div class="grid">
  <div class="col">1</div>
  <div class="col">2</div>
  <div class="col">3</div>
  <div class="col">4</div>
  <div class="col">5</div>
  <div class="col">6</div>
  <div class="col">7</div>
  <div class="col">8</div>
  <div class="col">9</div>
  <div class="col">10</div>
  <div class="col">11</div>
  <div class="col">12</div>
  <div class="col">13</div>
  <div class="col">14</div>
  <div class="col">15</div>
  <div class="col">16</div>
  <div class="col">17</div>
  <div class="col">18</div>
  <div class="col">19</div>
  <div class="col">20</div>
</div>

https://codepen.io/dobril/pen/gOrLoQJ