使用 grid auto-fit 与 minmax() 可创建响应式图标网格，如：.icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 16px; }，能自动调整列数并换行，适配多设备；通过设置 minmax(100px, 1fr) 等值优化图标显示，结合 justify-items 和响应式 gap 实现居中与美观布局，仅需几行 CSS 即可高效完成。
在CSS中创建响应式图标网格，grid auto-fit 与 minmax() 是最简洁高效的方式。它能自动调整列数以适应容器宽度，无需媒体查询即可实现多设备适配。
使用 grid auto-fit 和 minmax() 创建弹性列
通过 grid-template-columns 配合 repeat(auto-fit, ...) 与 minmax(min, max)，可以让网格列根据可用空间自动换行和伸缩。
例如：
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
gap: 16px;
}
这段代码表示：每列最小 80px，最大为 1fr（等分剩余空间），当容器宽度不足以容纳新列时，自动换行。
控制最小列宽以优化显示效果
设置合理的 minmax() 最小值，能避免图标被压缩得太小。比如图标包含文字说明，可将最小宽度设为 120px 或 150px。
立即学习“前端免费学习笔记（深入）”；
常见设置：
-
minmax(100px, 1fr)—— 适合小型图标 -
minmax(140px, 1fr)—— 适合带标签的图标卡片 -
minmax(200px, 1fr)—— 用于大图标或复杂内容
添加对齐与响应式间距
为了让网格在不同屏幕下更美观，可以结合 justify-items 和 gap 响应式调整。
示例增强版：
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
gap: 1rem;
justify-items: center;
}
这样图标内容居中对齐，间距随字体缩放，适配移动端与桌面端。
基本上就这些。auto-fit + minmax 让你用几行CSS搞定响应式图标布局，灵活又省事。
