使用 repeat(auto-fit, minmax()) 结合 media 查询实现响应式网格布局，1. 通过 auto-fit 自动调整列数并分配剩余空间，minmax() 设定每列最小宽度和弹性增长；2. 在不同断点下用 media 查询微调 minmax 的最小值，适配平板和手机；3. 注意父容器宽度、gap 间距影响及避免横向滚动条。该方法简洁高效，无需 JavaScript 即可实现自适应效果。
在使用 CSS 网格布局时，响应式适配确实可能遇到列数固定、屏幕尺寸变化后布局错乱的问题。解决这一问题的关键是结合 media 查询 与 repeat() 函数中的 auto-fit 或 auto-fill，让网格列数根据容器宽度自动调整。
使用 repeat(auto-fit, minmax()) 实现自适应列数
传统写法中，grid-template-columns 写死列宽和数量，无法适应不同屏幕。改用 auto-fit 可以让浏览器自动计算可容纳的列数，并将剩余空间合理分配。
- auto-fit：自动填充可用空间，空列会被折叠，适合内容动态场景
- auto-fill：即使没有内容，也会保留空列位置
- minmax(250px, 1fr)：每列最小 250px，最大占 1 份弹性空间
示例代码：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
配合 media 查询精细控制断点
虽然 auto-fit 能实现基本自适应，但在某些屏幕宽度下可能显得过密或过疏。此时加入 media 查询进行微调，能更好控制用户体验。
立即学习“前端免费学习笔记（深入）”；
比如在小屏设备上限制最小宽度，避免列数过多：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 16px;
}
/ 平板 /
@media (max-width: 768px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
}
/ 手机 /
@media (max-width: 480px) {
.grid-container {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
}
避免常见陷阱
实际开发中要注意以下几点：
- 确保父容器有明确宽度，否则 grid 可能无法正确计算列数
- minmax 的最小值不要设得太大，防止出现横向滚动条
- gap 间距也要考虑进总宽计算，影响最终列数
- 测试真机显示效果，模拟器可能不准确
基本上就这些。通过 repeat + auto-fit 配合 minmax 和 media 查询，既能保持布局简洁，又能实现良好的响应式效果，大多数场景下无需复杂计算或 JavaScript 辅助。不复杂但容易忽略。
