要让 CSS Grid 的网格间距自适应，关键是合理使用 fr 单位、minmax() 函数以及 auto-fit 或 auto-fill 配合 repeat()。这样可以让网格容器根据可用空间自动调整列数和间距，实现真正的自适应布局。
使用 repeat() 与 minmax() 实现弹性列宽
通过
repeat(auto-fit, minmax(...))可以创建能自动换行且列宽自适应的网格：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
说明：
- auto-fit：让浏览器自动计算最多能放多少列
- minmax(200px, 1fr)：每列最小 200px，最大占 1 份剩余空间
- 当容器变窄时，超出最小宽度的列会自动换行
用 gap 控制间距并保持自适应
gap 属性设置网格项之间的间距，不会影响整体布局的弹性：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 1rem; /* 推荐使用相对单位 */
}
使用 rem 或 em 单位可以让间距随字体大小或屏幕尺寸变化，增强响应性。
结合媒体查询优化不同屏幕表现
虽然 auto-fit 已很灵活，但在特定断点微调能提升体验：
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
}
@media (min-width: 768px) {
.container {
gap: 20px;
}
}
在大屏上适当增大间距，视觉更舒适。
基本上就这些。核心是利用 auto-fit/fill + minmax 来实现内容驱动的布局，再配合 gap 管理间距。不需要 JavaScript，纯 CSS 就能实现流畅的自适应网格。
