使用 display: grid 与 grid-template-columns 结合 repeat() 和 fr 单位可快速创建等宽网格，如 repeat(3, 1fr) 生成三等分列，支持响应式与自动布局，优于传统浮动方法。
要快速创建等宽网格布局，CSS Grid 提供了非常简洁高效的方法。核心是使用 display: grid 和 grid-template-columns 属性。
基本语法与实现方式
通过将容器设置为网格布局，并定义每列的宽度，即可实现等宽列。最常用的方式是结合 repeat() 函数和 fr 单位。
例如：- 使用
repeat(3, 1fr)表示创建 3 列，每列平均分配可用空间。 -
fr单位代表“自由空间比例”，确保各列等宽且自适应。 - 容器宽度自动处理间距，无需额外计算。
示例代码：
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px; /* 可选：设置列间间距 */
}
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<div class="container"> <div>内容1</div> <div>内容2</div> <div>内容3</div> </div>
灵活调整列数
你可以根据需要更改 repeat() 中的第一个参数来控制列的数量。
-
repeat(4, 1fr)创建 4 等宽列。 - 配合响应式设计，可在不同屏幕下动态调整列数。
响应式示例：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
这种方式会自动换行并调整列数，适合移动端适配。
对比传统方法的优势
相比浮动或 inline-block 布局，Grid 更加直观和强大。
- 无需清除浮动或处理空白字符问题。
- 行高、对齐可通过
align-items和justify-items轻松控制。 - 支持复杂布局嵌套，扩展性强。
基本上就这些，用 display: grid 配合 grid-template-columns 能在几行代码内完成等宽网格，简单又高效。
