Grid布局需求：实现三div两列一行布局（首列固定宽度）

问题场景 #

现有HTML结构：

<div class="wrapper">
    <div class="one">One</div>
    <div class="two">Two</div>
    <div class="three">Three</div>
</div>

需要实现的布局需求：

• 前两个子元素并排为两列：第一个列宽固定30px，第二个列占满剩余空间
• 第三个子元素独占一行，宽度铺满容器

你之前尝试的CSS代码未达到预期：

.wrapper {
    display: grid;
    grid-template-columns: 20px auto 100%;
    border:1px solid white;
}

问题原因 #

你错误地在grid-template-columns中定义了三列，而实际只需要两列基础布局，第三个元素需要通过跨列实现独占一行的效果。

正确实现代码 #

CSS代码 #

.wrapper {
    display: grid;
    grid-template-columns: 30px 1fr; /* 定义两列：固定30px + 弹性占满剩余空间 */
    gap: 8px; /* 可选：添加列/行间距，优化视觉效果 */
    border: 1px solid white;
}

.three {
    grid-column: 1 / -1; /* 让元素跨占所有列，自动独占一行 */
}

代码说明 #

• grid-template-columns: 30px 1fr：1fr是Grid布局的弹性单位，会自动分配容器的剩余可用空间，比auto更稳定，不会因子元素内容宽度影响布局
• grid-column: 1 / -1：-1代表最后一列的位置，这个属性让第三个元素从第一列延伸到最后一列，自然占据整行宽度

内容的提问来源于stack exchange，提问作者Musaffar Patel