本文介绍一种巧妙结合 display: contents 与 Flexbox 的响应式布局方案，解决 CSS Grid 中“第二行单元格需脱离首行列宽约束、按百分比等分”的典型需求，无需修改 HTML 结构逻辑即可实现语义清晰、样式解耦的响应式网格布局。
本文介绍一种巧妙结合 `display: contents` 与 flexbox 的响应式布局方案，解决 css grid 中“第二行单元格需脱离首行列宽约束、按百分比等分”的典型需求，无需修改 html 结构逻辑即可实现语义清晰、样式解耦的响应式网格布局。
在使用 CSS Grid 构建多列布局时，一个常见痛点是：当屏幕缩小时，希望将部分单元格（如 .c5–.c7）移至第二行，但又不希望它们沿用第一行定义的 grid-template-columns 中对应列的固定宽度（例如 60px），而是按容器等分（如各占 33.33%）。直接通过 grid-column-start 强制换行会导致这些元素仍受原列轨道尺寸影响，无法真正“重置宽度”。
根本原因在于：Grid 的列宽由 grid-template-columns 统一定义，子元素无法在不同行中拥有彼此独立的列轨道。
✅ 正确解法是分层控制：
- 大屏下：将 .c5–.c7 封装进 <div class="wrap">，并设 display: contents —— 此时该容器不产生盒模型，其子元素（.c5/.c6/.c7）直接融入 Grid，按 repeat(3, 60px) 分配宽度；
- 小屏下（≤1070px）：让 .wrap 跨越整行（grid-column: 1 / -1），同时切换为 display: flex，再通过 flex: 1 让内部三个子项均分剩余空间。
以下是完整可运行代码：
立即学习“前端免费学习笔记（深入）”；
<div class="grid">
<div class="c1">1</div>
<div class="c2">Lorem ipsum dolor sit amet</div>
<div class="c3">3</div>
<div class="c4">4</div>
<div class="wrap">
<div class="c5">5</div>
<div class="c6">6</div>
<div class="c7">7</div>
</div>
</div>/* 基础 Grid 布局（大屏） */
.grid {
display: grid;
width: 100%;
grid-template-columns: 50px auto 70px 250px repeat(3, 60px);
gap: 8px; /* 可选：增强可读性 */
}
/* 封装容器默认透明化 */
.wrap {
display: contents;
}
/* 单元格基础样式 */
[class^="c"] {
border: 1px solid #4a5568;
padding: 8px;
text-align: center;
background-color: #f7fafc;
}
/* 小屏响应式断点 */
@media screen and (max-width: 1070px) {
/* 精简首行列定义 */
.grid {
grid-template-columns: 50px auto 70px 250px;
}
/* 将 wrap 移至第二行并撑满全宽 */
.grid .wrap {
grid-column: 1 / -1; /* 从第1列到最后一列 */
display: flex;
gap: 8px; /* Flex 下的间距控制 */
}
/* 内部三项等分 */
.wrap > div {
flex: 1;
min-width: 0; /* 防止内容溢出破坏等分 */
}
}? 关键要点说明：
- display: contents 是实现“无感封装”的核心——它让父容器不参与渲染流，子元素直接受 Grid 管理；
- 小屏下 .wrap 切换为 display: flex 后，其 Grid 行位置由 grid-column 控制，而内部宽度则完全交由 Flexbox 重新计算，彻底脱离首行列轨道；
- min-width: 0 对 flex: 1 子项至关重要，尤其当内容较长时，可防止 Flex 项因默认 min-width: auto 而拒绝收缩；
- 若需更精细控制（如 c5 占 40%、c6/c7 各占 30%），只需替换 flex: 1 为 flex: 4, flex: 3, flex: 3 即可。
此方案兼顾语义性（HTML 结构清晰）、可维护性（CSS 逻辑分层）与兼容性（display: contents 在现代浏览器中已广泛支持），是响应式 Grid 布局中处理“混合排版模式”的推荐实践。
