使用repeat()函数结合auto-fit、minmax()和媒体查询可实现css网格列数的动态调整。1. 采用repeat(auto-fit, minmax(200px, 1fr))实现基础自适应，使列数随屏幕尺寸自动增减并填满容器；2. 通过媒体查询在不同断点精确控制列数，如600px以上设为2列，900px以上3列等，确保布局符合设计规范；3. 混合策略先用auto-fit保持灵活性，再于大屏断点（如1400px）固定最大列数为6，防止内容稀疏。该方法兼顾响应性与控制力，适用于卡片、图库等场景，逻辑清晰且易于维护。
在使用 CSS 网格布局时，如果希望网格的列数能根据屏幕尺寸动态调整，可以结合 repeat() 函数与媒体查询（media queries）实现自适应效果。这种方法既简洁又高效，适用于响应式卡片、图库或商品列表等场景。
使用 repeat(auto-fit, …) 实现基础自适应
通过 repeat() 配合 auto-fit 或 auto-fill，可以让网格自动填充可用空间，无需手动计算列数。
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
说明：
-
minmax(200px, 1fr)表示每列最小 200px，最大为等分的弹性空间。 -
auto-fit会自动调整列数，并拉伸项目填满容器；auto-fill则会保留空轨道。 - 这样在不同宽度下，列数会自然增减，比如大屏显示 5 列，小屏变为 2 列。
配合媒体查询精细控制断点
如果需要在特定屏幕尺寸下精确控制列数，可结合媒体查询逐步调整 repeat() 的参数。
立即学习“前端免费学习笔记（深入）”；
.grid-container { display: grid; grid-template-columns: repeat(1, 1fr); /* 默认单列 */ gap: 12px; }
@media (min-width: 600px) { .grid-container { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-container { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grid-container { grid-template-columns: repeat(4, 1fr); } }
优势：
- 每个断点明确控制列数，适合设计规范严格的产品页面。
- 兼容性好，逻辑清晰，易于维护。
混合策略：自动适配 + 断点微调
也可以先用 auto-fit 实现基本响应，再在关键断点优化表现。
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
/ 在超宽屏限制最大列数 / @media (min-width: 1400px) { .grid-container { grid-template-columns: repeat(6, 1fr); } }
这样既能保持灵活性，又能避免在巨屏上列数过多导致内容稀疏。
基本上就这些。用 repeat() 搭配 minmax() 和媒体查询，可以轻松实现列数的动态调整，兼顾响应性和控制力。实际开发中根据设计需求选择自动适配或断点控制，灵活组合即可。