本文介绍如何在无法修改 html 结构的前提下，仅通过 css 实现左侧定宽列（内容垂直占满）与右侧多行等宽区域的响应式网格布局，重点推荐使用 css grid 而非 flexbox。
本文介绍如何在无法修改 html 结构的前提下，仅通过 css 实现左侧定宽列（内容垂直占满）与右侧多行等宽区域的响应式网格布局，重点推荐使用 css grid 而非 flexbox。
在实际开发中，我们常遇到 HTML 结构受限（如第三方组件或 CMS 输出）但需灵活调整布局的场景。题中结构为一个容器包含四个子元素，要求呈现「左列固定宽度、右列由多个等高/等宽行组成」的网格效果——这本质上是一个二维布局问题：既要控制列宽分配，又要协调行高与跨行关系。
Flexbox 擅长一维布局（单向主轴+交叉轴），难以让 .c1 同时约束列宽又纵向跨越未知数量的行。而 CSS Grid 天然支持行列二维控制，是更精准、简洁的解决方案。
✅ 推荐实现（CSS Grid）
.cont {
display: grid;
grid-template-columns: auto 1fr; /* 左列自适应内容宽度，右列占满剩余空间 */
}
.c1 {
grid-row: span 100; /* 纵向跨越最多 100 行（远超实际需求，确保全覆盖） */
width: 200px; /* 显式设定左列宽度（可选，auto 本身已满足“由内容决定”） */
}
/* 可视化辅助（生产环境请移除） */
.cont > div {
border: 2px dashed #e74c3c;
padding: 12px;
box-sizing: border-box;
}
? grid-template-columns: auto 1fr 的含义：
- auto：第一列宽度由 .c1 的内容（或显式 width）决定；
- 1fr：第二列占据容器剩余所有可用宽度，且自动均分高度空间（各子项按文档流顺序依次填入）。
⚠️ 注意事项
- 避免滥用 flex：若强行用 Flexbox 实现，需嵌套多层容器或依赖 JS 计算行数，违背语义与可维护性；
-
span 100 安全性：即使未来新增 5，只要总行数 ≤ 100，布局仍稳定；若极端情况超出，可改用 span 999 或配合 grid-auto-rows 精细控制；
- 响应式增强：可在媒体查询中改为 grid-template-columns: 1fr 实现移动端单列堆叠；
- 兼容性提示：CSS Grid 在现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）中已全面支持，旧版 IE 不支持，需按项目要求评估降级方案。
该方案以最少代码、最高可读性达成目标布局，体现了 CSS Grid 在复杂二维结构中的不可替代性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
