在CSS网格布局的实际开发中，很多开发者会遇到网格列宽不一致的问题，这会导致页面排版混乱，影响视觉效果。造成这个问题的常见原因是列宽设置方式不统一，比如部分列用固定像素值，部分列用百分比或者未设置自适应规则，不同内容长度也会进一步拉大列宽差异。
为什么会出现网格列宽不一致
网格列宽不一致的核心原因是grid-template-columns属性的设置逻辑不统一，常见场景有以下几种：
- 混合使用固定单位和自适应单位，比如同时设置
100px和1fr，不同列的空间分配规则不同 - 手动逐个定义多列宽度，容易出现数值输入误差，比如本来要设置3列等宽，却写成
1fr 1.1fr 1fr - 网格子元素内容长度差异过大，且列宽没有设置强制统一规则，内容会撑开对应列的宽度
使用fr单位统一列宽
fr是CSS网格布局特有的自适应单位，代表网格容器中剩余可用空间的分配比例，使用fr单位可以让所有列按照设定的比例分配空间，天然保证列宽规则统一。
比如要设置3列等宽的网格，只需要将每列都设置为1fr即可，不管容器宽度怎么变化，三列的宽度都会保持一致：
/* 3列等宽网格，每列占剩余空间的1份 */
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
/* 子元素样式，避免内容撑开列宽 */
.item {
padding: 15px;
border: 1px solid #e5e5e5;
word-break: break-all;
}
如果需要设置不同比例的列宽，比如左侧列占2份，右侧两列各占1份，只需要调整fr的数值即可：
/* 3列宽度比例为2:1:1 */
.container {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 10px;
}
使用repeat函数批量设置统一列宽
当需要设置多列相同宽度时，逐个写fr单位会比较繁琐，还容易出错，这时候可以使用repeat()函数批量定义列规则，语法为repeat(重复次数, 列宽规则)。
比如要设置5列等宽的网格，用repeat函数可以写成repeat(5, 1fr)，效果和写5个1fr完全一致，但是更简洁，也不容易写错数值：
/* 5列等宽网格，使用repeat函数简化写法 */
.container {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 10px;
}
/* 子元素样式 */
.item {
padding: 12px;
background-color: #f5f5f5;
text-align: center;
}
repeat函数也支持和非重复的规则混合使用，比如要设置第一列固定200px，后面4列等宽，可以这样写：
/* 第一列固定200px，后面4列等宽 */
.container {
display: grid;
grid-template-columns: 200px repeat(4, 1fr);
gap: 10px;
}
两种方式的适用场景对比
fr单位和repeat函数可以结合使用，两者的适用场景各有不同，具体可以参考下面的对比：
| 方式 | 适用场景 | 优势 |
|---|---|---|
| fr单位 | 列数较少，或者列宽比例不固定的场景 | 灵活调整每列的比例，适配个性化布局需求 |
| repeat函数 | 多列等宽，或者重复相同列规则的场景 | 写法简洁，减少重复代码，避免手动输入误差 |
注意事项
使用fr单位和repeat函数统一列宽时，还需要注意以下几点：
- 如果网格容器没有设置明确的宽度，fr单位的分配会基于父容器的可用空间，需要确保父容器有明确的宽度规则
- 如果子元素内容过长且没有设置换行规则，还是可能撑开列宽，建议给子元素添加
word-break: break-all或者overflow: hidden样式 - fr单位分配的是剩余可用空间，如果网格容器中还有固定宽度的列，剩余空间会先扣除固定列的宽度，再按照fr比例分配
统一网格列宽的核心是保持grid-template-columns的设置逻辑一致，优先使用fr相关规则，避免混合固定单位和自适应单位，就能有效解决列宽不一致的问题。
CSS_gridfr单位repeat函数grid_template_columns修改时间：2026-07-23 08:51:26