如何在 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>