本文介绍如何在无法修改 html 结构的前提下，仅通过 css 实现左侧定宽列（内容垂直占满）与右侧多行等宽区域的响应式网格布局，重点推荐使用 css grid 而非 flexbox。
本文介绍如何在无法修改 html 结构的前提下，仅通过
css
实现左侧定宽列（内容垂直占满）与右侧多行等宽区域的响应式网格布局，重点推荐使用 css grid 而非 flexbox。
在实际开发中，我们常遇到 HTML 结构受限（如第三方组件或 CMS 输出）但需灵活调整布局的场景。题中结构为一个容器包含四个子元素，要求呈现「左列固定宽度、右列由多个等高/等宽行组成」的网格效果——这本质上是一个二维布局问题：既要控制列宽分配，又要协调行高与跨行关系。
Flexbox 擅长一维布局（单向主轴+交叉轴），难以让 .c1 同时约束列宽又纵向跨越未知数量的行。而
CSS Grid 天然支持行列二维控制
，是更精准、简洁的解决方案。
✅ 推荐实现（CSS Grid）
? grid-template-columns: auto 1fr 的含义：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
auto：第一列宽度由 .c1 的内容（或显式 width）决定；
1fr：第二列占据容器剩余所有可用宽度，且自动均分高度空间（各子项按文档流顺序依次填入）。
⚠️ 注意事项
避免滥用 flex
：若强行用 Flexbox 实现，需嵌套多层容器或依赖 JS 计算行数，违背语义与可维护性；
span 100 安全性
：即使未来新增
.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;
}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 在复杂二维结构中的不可替代性。
立即学习
“
前端免费学习笔记（深入）
”；