使用 grid-template-columns 配合 fr、repeat 和 minmax 可轻松实现等宽列布局，如 1fr 均分容器、repeat(4, 1fr) 创建四等宽列，或 repeat(auto-fit, minmax(150px, 1fr)) 实现响应式自适应列数与最小宽度控制。
使用 CSS Grid 实现等宽列布局非常简单，核心是通过 grid-template-columns 属性定义列的宽度。下面介绍几种常用方法。
使用 fr 单位均分容器宽度
fr（fraction）单位表示可用空间的一份。如果希望所有列等宽，可以为每列设置相同的 fr 值。
例如：创建三列等宽布局
代码示例：
CSS：
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
这会让三列各占容器宽度的三分之一，自动适应容器大小。
使用 repeat() 简化重复列定义
当列数较多时，可以用 repeat() 函数避免重复书写。
立即学习“前端免费学习笔记（深入）”；
例如：创建四等宽列
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
repeat(4, 1fr) 表示创建 4 列，每列宽度为 1fr，效果与手动写 1fr 1fr 1fr 1fr 相同。
限制最大宽度或添加最小宽度控制
有时你希望列等宽但不希望在大屏幕上过度拉伸，可以结合 minmax() 使用。
例如：每列至少 150px，最多等分剩余空间
CSS：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
}
这种方式在响应式布局中很实用，既能保持等宽，又能根据屏幕尺寸自动调整列数。
基本上就这些。用 grid-template-columns 配合 fr、repeat 和 minmax，就能灵活实现各种等宽列需求。
