H5应用市场网格布局靠三句话实现：用repeat(auto-fit, minmax(160px,1fr))自适应列数，aspect-ratio锁定图标卡片比例，gap与padding协同控制间距和边缘留白。
在 H5 页面中用 Grid 实现应用市场软件网格平铺，关键不是“堆满”，而是让图标卡片在不同屏幕下自动调整列数、保持比例、不拉伸不变形、边缘留白自然——整套逻辑靠三句话就能落地：用 repeat(auto-fit, minmax()) 算列数，用 aspect-ratio 锁卡片比例，用 gap + padding 控呼吸感。
列数随屏自适应：不用写断点也能响应式
直接在容器上设置：
-
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr))—— 每列最小 160px（适配手机横屏图标+文字），最大均分剩余空间；小屏自动缩为 2 列，桌面轻松撑到 5–6 列 - 优先选
auto-fit：空列会被合并，已有列均分宽度，视觉更紧凑；auto-fill会保留空轨道，可能导致小屏下单列过窄、文字挤成一团 - 避免混用单位：别写
200px 1fr或1fr 1fr 1fr，前者破坏自适应，后者固定死列数，失去响应意义
图标卡片统一比例：防止高低错落
每个软件项（如 .app-item）必须自带“骨架”：
- 设
aspect-ratio: 1 / 1（正方形）或4 / 3（常见应用截图比），浏览器原生支持，无需 JS 计算高度 - 内部图片用
width: 100%; height: 100%; object-fit: cover;，确保图标居中裁剪、不模糊不变形 - 文字区域加
min-height: 0防止被长文本撑开，破坏整体网格节奏
间距与边缘处理：让网格看起来“有设计感”
别依赖 margin，Grid 有自己的呼吸法则：
- 统一用
gap: 12px控制项目间空隙（行列都生效），比分别写row-gap/column-gap更简洁 - 容器加
padding: 12px（数值必须等于 gap），视觉上实现“内边距 = 间隙”，解决最外侧卡片贴边问题 - 禁用
margin在项目上：它会脱离 Grid 轨道基准，导致对齐错乱或 gap 折叠失效
内容对齐与微调：让文字和图标都稳住
默认拉伸（stretch）不适合图文混合卡片，需主动约束：
- 容器设
justify-items: center; align-items: start;→ 所有卡片水平居中、顶部对齐 - 卡片内标题文字加
text-overflow: ellipsis; white-space: nowrap; overflow: hidden;防溢出 - 若某类卡片（如“推荐位”）需右对齐或底部标签，单独加
justify-self: end或align-self: end，不干扰其他项
