如何在 CSS 网格中使用行跨度

Question

不确定我想要实现的目标是否可以使用 css 网格，但我当前的实现不起作用。下面是我想要实现的布局。红色框跨两行。

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 4;
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

<div id="wrapper">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 1

正如评论中所说，您不跨越 2 行，而是跨越 2 列。您还需要将该类应用于第一个元素：.wide { grid-column: span 2; }

在您的图片中，您还有一个 6 列网格而不是 5 列网格

.grid {
  display: grid;
  grid-template-columns: repeat(6, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.wide {
  grid-column: span 2;
}


/* for styling purpose only */
.grid > div:nth-child(n+1) {
  background-color: grey;
}

.grid > div:nth-child(1) {
  background-color: brown;
}

<div class="grid">
  <div class="wide"></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Answer 2

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
}

.wide {
  grid-row: 1 / 2;
  grid-column: 1 /3;
  background-color: re
}

.block {
  background-color: blue;
}

<div id="wrapper">
  <div class="block wide"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

Answer 3

下面的内容正是你想要的。

<div id="wrapper">
    <div class="block" style="grid-column: 1/3;"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

在 CSS 中，我删除了 .wide 和 .block。 #wrapper 保持不变。

---

不确定我想要实现的目标是否可以使用 css 网格实现

任何事情都可以使用 CSS Grid ?