用CSS Grid实现响应式列数需结合媒体查询与grid-template-columns：默认单列，481px起设2列，769px起3列，1025px起4列；更优方案是auto-fit+minmax自动适配列数。
用 CSS Grid 布局实现“不同屏幕宽度显示不同列数”，核心就是配合媒体查询（@media）动态修改 grid-template-columns 的值。
基础 Grid 列数控制
先定义一个默认的网格容器，比如移动端优先设为单列：
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
这里 1fr 表示占满一行可用空间，适合手机竖屏。
用媒体查询按断点切换列数
在不同视口宽度下，覆盖 grid-template-columns 即可。常见做法是：
- ≤ 480px：1 列（默认已设，可不重复写）
- 481px – 768px：2 列（平板竖屏）
- 769px – 1024px：3 列（小桌面 / 平板横屏）
- ≥ 1025px：4 列或 auto-fit + minmax（更灵活）
对应代码：
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 481px) {
.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
.grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
.grid { grid-template-columns: repeat(4, 1fr); }
}
进阶：用 auto-fit + minmax 实现响应式自适应列数
比起固定列数，更推荐下面这种“智能等宽列”写法，它能根据容器宽度自动计算最多放几列，且每列不小于某个最小值：
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
}
说明：
-
minmax(250px, 1fr)：每列至少 250px，剩余空间平均分 -
auto-fit：浏览器自动填充尽可能多的列，空列会被合并 - 这个写法本身已具备响应能力，通常无需额外媒体查询
如需微调，可在特定断点下改 minmax() 的最小值，例如：
@media (max-width: 768px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
注意事项和实用技巧
避免常见坑：
- 媒体查询断点建议用
min-width，从窄到宽递增写，方便维护 - 不要混用
float或inline-block等旧布局方式，Grid 容器内子元素默认是网格项 - 如果内容高度差异大，加
grid-auto-rows: minmax(min-content, max-content)防止错位 - 调试时用浏览器开发者工具的“网格检查器”（Grid Inspector），能直观看到轨道线和区域
基本上就这些。用好 repeat()、minmax() 和媒体查询组合，就能让 Grid 在各种屏幕上都排得干净又灵活。
