如何在CSS Grid中使用row span实现元素跨多行的布局效果

你要的布局可以用CSS Grid实现，只要修改两处CSS规则即可：

• 红色区块的grid-row属性当前设置为1 / 4，对应跨3行，改为1 / 3即可实现跨2行的效果
• 给网格容器加上grid-auto-flow: dense属性，让灰色区块可以自动填充红色区块旁的空位，不会出现不必要的留白

修改后的完整代码如下：

CSS代码 #

#wrapper {
  display: grid;
  grid-template-columns: repeat(5, 90px);
  grid-auto-rows: 50px;
  grid-gap: 5px;
  width: 516px;
  grid-auto-flow: dense; /* 新增属性，自动填充空位 */
}

.wide {
  grid-row: 1 / 3; /* 从第1条行线到第3条行线，刚好跨2行 */
  grid-column: 3 / 5;
  background-color: red;
}

.block {
  background-color: grey;
}

HTML代码 #

<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>

内容的提问来源于stack exchange，提问作者user992731