如何实现CSS Grid三列布局：中间固定宽度 左右等宽占满剩余空间

问题修正方案 #

你现有代码存在两处问题：

• gap: 5没有指定长度单位，不符合CSS规范，浏览器会判定该属性无效，不会渲染列间距
• grid-template-columns中使用的auto关键字会优先根据列内内容分配宽度，无法保证左右两列宽度相等

把CSS代码修改为如下即可实现需求：

.grid {
    width: 100%;
    height: 100%;
    display: grid;
    gap: 5px; /* 补全单位让间距属性生效 */
    background-color: lightBlue;
    grid-template-columns: 1fr 50px 1fr; /* 用fr单位替代auto */
}

.grid-item {
    border: 1px solid black;
    overflow: hidden;
}

fr是CSS Grid专属的弹性分数单位，浏览器计算宽度时会先扣除中间固定的50px宽度、以及gap的总宽度，把剩余可用空间平均分成2份，左右两列各占1份，天然就能保证左右列宽度完全相等，中间列固定且始终居中。

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