本文介绍如何在 html 结构不可修改的前提下，仅通过 css 实现左侧固定宽度单列（内容纵向占满）、右侧多行自适应等宽列的网格布局——推荐使用 css grid 而非 flexbox，因其原生支持二维布局控制。
本文介绍如何在 html 结构不可修改的前提下，仅通过 css 实现左侧固定宽度单列（内容纵向占满）、右侧多行自适应等宽列的网格布局——推荐使用 css grid 而非 flexbox，因其原生支持二维布局控制。
在给定 HTML 结构下：
<div class="cont"> <div class="c1">1</div> <div class="l2">2</div> <div class="l3">3</div> <div class="l4">4</div> </div>
目标是构建如下二维布局：
- 左侧 c1 占据整列（垂直方向跨越所有行），宽度由内容或显式设定（如 200px）；
- 右侧 l2、l3、l4 自上而下依次排列，共享同一列，且该列自动填充剩余可用宽度。
Flexbox 的局限性：Flexbox 是一维布局模型，虽可设置 flex-direction: column 或 row，但无法让一个子元素同时控制跨行与另一组元素按行堆叠——尤其当首项需纵向贯穿、其余项需横向对齐时，Flex 无法天然协调两个正交方向的尺寸与位置关系。
✅ 正确解法：CSS Grid
利用 Grid 的二维能力，定义两列布局，并精确控制首项的行跨度：
.cont {
display: grid;
grid-template-columns: auto 1fr; /* 左列宽度由内容决定，右列为剩余空间 */
gap: 0; /* 可选：控制行列间距 */
}
.c1 {
grid-row: span 100; /* 纵向跨越最多 100 行（安全值，远超实际行数） */
width: 200px; /* 显式设定左列宽度（也可用 min-content / fit-content） */
}
/* 可视化调试（生产环境请移除） */
.cont > div {
border: 2px dashed #e74c3c;
padding: 12px;
box-sizing: border-box;
}✅ 关键说明：
- grid-template-columns: auto 1fr 中，auto 使左列宽度由 .c1 的内容或 width 属性决定；1fr 表示右列占据所有剩余空间。
- grid-row: span 100 是可靠替代方案——当行数不确定时，避免硬编码 span 3（若后续新增元素则失效），100 是足够安全的上限值（浏览器会自动截断至实际最大行数）。
- 所有后续元素（.l2、.l3、.l4）默认按源顺序逐行填入第二列，无需额外定位。
? 进阶提示：
- 若需左列最小宽度保障，可用 minmax(200px, auto) 替代 auto；
- 如需右侧区域等高（如每行高度一致），可配合 grid-auto-rows: minmax(80px, auto)；
- 兼容性方面，现代浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+）均完整支持该写法。
综上，面对「首项纵向占满、余项横向分布」的二维需求，请果断放弃 Flexbox 的一维思维，转向语义清晰、控制精准的 CSS Grid 方案。
