要制作一个响应式图标网格，关键是使用灵活的布局方式让图标在不同屏幕尺寸下自动调整排列。下面介绍一种基于 CSS Grid 的简单高效方法，确保图标在手机、平板和桌面设备上都能良好显示。
使用 CSS Grid 创建基础网格
Grid 布局非常适合创建二维网格结构。通过 grid-template-columns 配合 repeat() 和 minmax() 函数，可以让列数根据容器宽度动态变化。
示例代码：
复制AI写代码|
1 2 3 4 5 6 7 8 9 10 11 |
.icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 16px; padding: 20px; } <p>.icon-grid i, .icon-grid .icon { font-size: 24px; text-align: center; }</p> |
说明：
- auto-fit 让浏览器自动填充可用列数
- minmax(80px, 1fr) 表示每列最小 80px，最大占 1 份剩余空间
- gap 控制图标之间的间距
适配小屏幕优化体验
在手机等小屏设备上，可以进一步限制最小宽度，避免图标过小或换行过于频繁。
建议设置：
- 将 minmax 的最小值设为 60px~70px，适应手指点击
- 减少 gap 间距，比如从 16px 改为 10px
- 使用 padding 保证边缘留白
也可以添加媒体查询进行微调：
复制AI写代码|
1 2 3 4 5 6 |
@media (max-width: 480px) { .icon-grid { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 10px; } } |
搭配图标字体或 SVG 使用
可以使用 Font Awesome、Material Icons 等图标字体，或内联 SVG 图标。
HTML 示例：
复制AI写代码|
1 2 3 4 5 6 |
<divclass="icon-grid"> <spanclass="icon">?</span> <spanclass="icon">?</span> <spanclass="icon">?</span> <spanclass="icon">?</span> </div> |
每个图标放在独立元素中，便于对齐和响应式处理。
基本上就这些。用 CSS Grid 搭配 auto-fit 和 minmax，再稍作适配，就能实现一个简洁实用的响应式图标网格。不复杂但容易忽略细节，比如最小宽度和触控友好性。