CSS Grid布局如何在不修改HTML的前提下让两个子项堆叠在同一单元格？

实现方案 #

只需在原有CSS规则基础上新增以下两条样式规则即可实现需求，无需修改现有HTML结构：

.grid-container .item2 {
  grid-column: 2;
  grid-row: 2;
}
.grid-container .item4 {
  grid-column: 2;
  grid-row: 2;
  margin-top: 25px;
}

实现逻辑说明 #

• 通过grid-column和grid-row显式指定.item2和.item4都绑定到网格第二列第二行的同一个单元格
• 两个元素高度均为25px，总高度正好匹配其他网格项50px的高度，给.item4添加25px上边距即可让两个元素上下堆叠、互不重叠，正好填满整个单元格
• 原有grid-auto-flow: row dense规则会自动将剩余网格项填充到空白网格位置，不会出现布局错乱

完整可运行CSS代码 #

.item3 { grid-column: auto / span 2; }

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-auto-flow: row dense;  
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  height: 50px; 
}
.grid-container .item2, .grid-container .item4 { 
    height: 25px; 
    background: yellow; 
}
/* 新增规则 */
.grid-container .item2 {
  grid-column: 2;
  grid-row: 2;
}
.grid-container .item4 {
  grid-column: 2;
  grid-row: 2;
  margin-top: 25px;
}

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