CSSGrid多列等宽布局技巧

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《CSS Grid等宽多列布局技巧》，聊聊，我们一起来看看吧！

fr单位是CSS Grid实现等宽多列最直接可靠的方式，通过grid-template-columns配合repeat()或混搭固定值与minmax()，可灵活实现等宽、响应式及自适应布局。

用 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 会自动从总宽中扣除间隙再分配

好了，本文到此结束，带大家了解了《CSSGrid多列等宽布局技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！