CSS Grid等宽多列怎么实现？fr单位轻松划分

CSS Grid 中的 `fr` 单位是实现等宽多列布局最简洁、可靠且语义清晰的方案——无论是三列均分、混搭固定侧边栏与自适应主体，还是配合 `auto-fit` 和 `minmax()` 构建智能响应式网格，`fr` 都能自动按剩余空间比例精准分配宽度，无需手动计算百分比或像素值，还能天然规避 `gap` 干扰，彻底告别传统布局的繁琐与不确定性。

用 fr 单位是 CSS Grid 实现等宽多列最直接、最可靠的方式。

用 grid-template-columns 配合多个 1fr

每列写一个 1fr，Grid 会自动均分可用空间。例如三等宽列：

container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

更简洁写法（推荐）：

grid-template-columns: repeat(3, 1fr);

四列、五列同理，改数字即可，无需计算百分比或像素值。

混搭固定列与等宽列时仍保持“等宽”语义

想让中间几列等宽，左右加固定宽度侧边栏？fr 依然适用：

grid-template-columns: 200px 1fr 1fr 1fr 200px;

中间三列会平分剩余空间，彼此严格等宽，不受两侧固定值影响。

也可用 minmax() 防止过窄：

grid-template-columns: 200px repeat(3, minmax(0, 1fr))) 200px;

响应式中动态调整列数，fr 配合 auto-fit 更灵活

避免为不同屏幕写多个 repeat(n, 1fr)？用 auto-fit + minmax() 自动适配：

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))));

浏览器会在容器内尽可能放入最小宽度 250px 的列，超出则换行，每列仍保持等宽（因都用 1fr）。

注意：别混淆 fr 和 % 或 flex 的行为

fr 是 Grid 特有单位，按**剩余空间比例分配**，不是父容器总宽的百分比；

• 两列 1fr 2fr → 占剩余空间的 1/3 和 2/3
• 三列 1fr 1fr 1fr → 各占 1/3，真正等宽
• 不用考虑 gap 占用——Grid 会自动从总宽中扣除间隙再分配

本篇关于《CSS Grid等宽多列怎么实现？fr单位轻松划分》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！