使用 repeat(auto-fit, minmax(200px, 1fr)) 可创建自适应网格，每列最小200px、最大等分剩余空间，自动填充列数且不留空隙。
在现代响应式网页设计中，CSS Grid 布局是实现弹性网格的强大工具。结合 grid-template-columns 的 repeat(auto-fit) 和 gap 属性，可以轻松创建自动适应容器宽度、间距均匀的网格系统。
使用 grid-template-columns 与 auto-fit 实现自适应列数
auto-fit 是 repeat() 函数中的一个关键字，用于根据可用空间自动填充网格列。它会尽可能多地重复指定的列宽，同时避免产生空列或溢出容器。
-
repeat(auto-fit, minmax(200px, 1fr))：每列最小 200px，最大为 1fr（等分剩余空间），浏览器自动计算能容纳多少列。 - 相比
auto-fill，auto-fit会在有多余空间时拉伸已有列以填满容器。
通过 gap 控制网格项之间的间距
gap 属性用于设置网格行与列之间的间距，替代了过去需要额外 margin 或复杂计算的方式。
使用方式：-
gap: 10px;设置行列统一间距。 -
gap: 10px 20px;分别设置行间距和列间距（类似 padding 写法）。 - gap 不会影响容器边缘，只作用于项目之间，布局更干净。
完整示例：响应式卡片网格
以下是一个实用的弹性网格布局代码片段：
立即学习“前端免费学习笔记（深入）”；
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
padding: 16px;
}
.card {
background: #f0f0f0;
padding: 20px;
border-radius: 8px;
text-align: center;
}
这个结构在桌面端可能显示 4 列，在平板上变为 2 列，手机上变成 1 列，全程无需媒体查询。
基本上就这些。auto-fit 配合 minmax 和 gap，让响应式网格变得简洁高效。不复杂但容易忽略细节，比如 minmax 的最小值应合理设置，避免小屏下文字挤压。实际开发中建议配合 devtools 调试不同视口下的表现。
