使用CSS Grid的fr单位与repeat()函数可高效实现多列等分布局，结合gap和minmax()支持响应式设计，代码简洁且维护方便。
实现多列等分布局是前端开发中常见的需求，尤其是在构建响应式网格系统时。CSS Grid 布局提供了一种现代、简洁的方式，其中 fr 单位 与 repeat() 函数的结合使用，能快速实现等分的列布局，无需计算百分比或处理浮动。
Grid 中 fr 单位的含义
fr（fraction）代表“分数单位”，表示容器中可用空间的一部分。它会根据剩余空间自动分配宽度，非常适合创建等宽或多列自适应布局。
比如，将网格容器设置为三列，每列 1fr，那么每一列都会平均占据容器的三分之一宽度：
.grid-container {display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
使用 repeat() 简化重复列定义
当需要创建多个等宽列时，手动写多个 1fr 显得冗余。CSS 提供了 repeat() 函数来简化语法。
立即学习“前端免费学习笔记（深入）”；
例如，创建一个四列等分布局：
.grid-container {display: grid;
grid-template-columns: repeat(4, 1fr);
}
这行代码等价于写四个 1fr，但更简洁且易于维护。如果后续要改为五列，只需修改数字即可。
结合 gap 实现列间距
实际项目中，列之间通常需要留出间距。Grid 提供了 gap 属性（或 grid-gap），用于设置行与列之间的间隔。
添加 gap 不会影响 fr 的等分逻辑，Grid 会自动在计算时排除间隙所占的空间：
.grid-container {display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
此时三列仍保持等宽，中间有 20px 的间隔，布局整洁且响应式良好。
响应式场景下的灵活应用
结合媒体查询或 minmax()，可以进一步提升布局的灵活性。例如，在小屏幕上自动变为两列：
.grid-container {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
这种方式不依赖固定列数，而是让浏览器根据容器宽度自动调整每列最小宽度为 250px，并尽可能等分剩余空间，适合卡片式布局。
基本上就这些。用好 fr 和 repeat()，再配合 gap 和 minmax()，就能高效实现各种等分布局，代码清晰，维护方便。不复杂但容易忽略细节。
