CSS实现.big-div跨行两行布局，让.small-div填充其右侧两行后再换行

嘿，这个需求用CSS Grid就能完美实现，刚好对应你想要的类似rowspan="2"的布局效果！我帮你调整了代码，直接看方案：

修改后的CSS代码 #

.wrapper {
  max-width: 600px;
  border: 1px solid #333;
  display: grid;
  /* 第一列匹配big-div的宽度，后续自动填充small-div的宽度 */
  grid-template-columns: 212px repeat(auto-fill, 100px);
  /* 每行高度对应small-div的高度 */
  grid-auto-rows: 100px;
  /* 用gap代替margin，统一控制元素间距 */
  gap: 8px;
  /* 保留内边距，让元素和wrapper边框的间距和原来一致 */
  padding: 4px;
}

.big-div {
  min-width: 212px;
  min-height: 212px;
  max-width: 212px;
  max-height: 212px;
  background-color: #778;
  /* 核心：让big-div占据两行垂直空间，模拟rowspan=2 */
  grid-row: span 2;
}

.small-div {
  min-width: 100px;
  min-height: 100px;
  max-width: 100px;
  max-height: 100px;
  background-color: #787;
}

为什么这么改？ #

• grid-row: span 2：这是实现你要的“跨行”效果的核心，它让.big-div直接占据两行的垂直空间，和表格的rowspan="2"逻辑完全一致。
• Grid布局的自动排列：右边的.small-div会自动填充.big-div右侧的两行空间，当这两行的位置被填满后，后续的.small-div会自动换行到.big-div的下方，完全符合你的需求。
• 用gap替代margin：相比原来的inline-flex+margin，Grid的gap能更精准地控制元素间距，还能避免margin折叠的问题，布局更稳定。

额外优化（可选） #

如果需要响应式效果——比如屏幕变窄时，.big-div也能自动换行到顶部，可以把grid-template-columns改成：

grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));

然后给.big-div加上grid-column: span 2，这样它会占据两列宽度，同时保持跨行的效果，适配不同屏幕尺寸。

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