使用CSS Grid的repeat(auto-fit)和minmax()可实现动态响应式网格布局，通过设置最小列宽和自动填充特性，使网格在不同屏幕尺寸下自动调整行列；配合gap、对齐属性及媒体查询断点优化，能构建灵活自适应的页面结构。
使用 CSS Grid 实现动态网格布局，关键在于利用响应式单位和自动排列特性，让网格容器能根据内容或屏幕尺寸自动调整列数和行高。下面介绍几种实用方法，帮助你构建灵活、自适应的网格布局。
1. 使用 repeat(auto-fit) 和 minmax()
这是实现动态列数最核心的方法。通过auto-fit 让网格列自动填充容器，结合 minmax() 设置每列最小和最大宽度，实现“内容足够时换行”的效果。
示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
说明：
-
auto-fit：自动计算可容纳多少列，并拉伸填满容器。 -
minmax(200px, 1fr)：每列最小 200px，最大为等分的 1fr（即剩余空间均分）。 - 当容器变窄，列宽小于 200px 时，会自动换到下一行。
2. 使用 auto-fill 的差异
与auto-fit 类似，但 auto-fill 会生成所有可能的轨道，即使没有内容填充，也会留出空白位置。
对比场景：
- 用
auto-fit：有几项就显示几列，多余空间被已存在列共享。 - 用
auto-fill：即使只有 2 个子项，也可能创建 5 列，后面 3 列为空白。
auto-fit 实现更紧凑的动态布局。
3. 控制对齐与间距
配合justify-items、align-items 和 gap 可进一步优化视觉效果。
示例：
立即学习“前端免费学习笔记（深入）”；
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 20px;
justify-items: center;
align-items: stretch;
}
这样可以确保每个网格项在各自单元格中居中对齐，且间距一致。
4. 响应式断点微调（可选）
虽然 auto-fit 已具备响应能力，但在特定屏幕下可手动优化。例如，在大屏强制最多 4 列：
@media (min-width: 1200px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
小屏仍保持自动适应：
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
}
基本上就这些。合理使用 repeat(auto-fit) 和 minmax() 能让你的网格真正“动”起来，无需 JavaScript 即可实现内容自适应、设备自适应的布局效果。 
