如何在不可修改嵌套HTML时实现4列级联Div的网格布局

由于HTML结构是嵌套且无法修改的，我们可以利用CSS的display: contents属性将嵌套结构“扁平化”，让内层元素直接成为最外层Grid容器的子项，从而实现预期的4列布局。

解决方案代码 #

/* 最外层容器设置目标Grid布局 */
.col1 {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 16px; /* 可选：添加列间距，优化视觉效果 */
}

/* 让中间嵌套的Div不再生成独立布局盒子，其子元素直接并入父容器 */
.col2, .col3 {
  display: contents;
}

/* 可选：给每列内容添加基础样式，方便区分 */
.col1, .col2, .col3, .col4 {
  padding: 12px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
}

原理说明 #

• display: contents 会让元素本身不在布局中生成独立盒子，它的所有子元素会直接成为其父元素的子元素，相当于“穿透”了嵌套层级。
• 给.col1设置目标Grid布局后，原本嵌套的文本内容和.col4会被“拉平”为.col1的直接子项，自动填充到4列中，完全匹配需求的布局效果。

注意事项 #

• display: contents 兼容性良好，现代浏览器（Chrome、Firefox、Safari 13.1+、Edge）均支持。
• 如果需要兼容旧版浏览器，可尝试通过绝对定位将每个嵌套Div定位到对应列，但这种方式需要手动计算宽度，灵活性不如display: contents。

内容的提问来源于stack exchange，提问作者Yasser Jiménez Martínez