为什么选择 CSS Grid 来实现商品网格
与传统布局的对比
CSS Grid 提供了对二维网格的原生支持，使得横向与纵向的对齐变得直观，布局控制更精确，无需大量浮动或复杂的嵌套容器。
相较于以前依赖表格或浮动的方式，使用网格可以在一个容器内同时管理行与列，带来更稳定的响应式体验与更简洁的样式层级，减少了开发与维护成本。
对用户体验的影响
良好的网格布局能让商品卡片在不同屏幕尺寸下保持一致的视觉节奏，提升信息可读性与浏览效率，使用户更容易发现和点击商品。
同时，网格的对齐稳定性有助于提升加载时的感知速度，避免页面出现灯泡般的重新排布，从而增强用户信任感。
使用 grid-template-columns: repeat 的基本语法
repeat 的基本用法
grid-template-columns 的核心在于定义列的数量与宽度，repeat() 让我们用一个表达式重复多次，极大简化代码。
典型写法如 grid-template-columns: repeat(4, 1fr);，其中 1fr 表示可用空间的等分分配。
/* 典型等分四列网格 */
.grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 16px;
}结合单位的灵活写法
你也可以结合像 minmax() 这样的函数，以实现列宽的上下限，达到更好的自适应效果。
例如：grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));，其中 auto-fill 会尽可能多地填充列。
/* 自动填充并尽量保持列宽 */
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 12px;
}自适应网格的核心：auto-fill 与 auto-fit
auto-fill 的行为
auto-fill 会在水平方向上“填充”尽可能多的列，即使最后一行存在空单元格，仍然保持均匀的列宽与间距。
对于商品网格，这意味着页面宽度变化时，列数会动态增加或减少，而单元格宽度始终保持一致的视觉节奏。
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px;
}auto-fit 的行为
与 auto-fill 相比，auto-fit 会将多余的空列合并为可用的列，从而让网格在剩余空间充盈时显得更紧凑。
在屏幕变宽时，auto-fit 常使底部空白区域减少，提高信息密度，特别适合商品列表的横向扩展场景。
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px;
}结合 minmax 实现灵活的列宽
为什么要用 minmax
minmax() 允许设置列宽的下限与上限，避免在小屏幕上列过窄，或在大屏幕上列过宽，造成视觉不稳定。
将 minmax() 与 repeat 搭配后，可以在不同设备上维持一致的视觉密度，兼顾响应性与可读性，确保网格单元既不挤也不空。
示例解析：结合 minmax 与 auto-fill
使用 grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));，每列最小宽度为 180px，超过时按 1fr 平分剩余空间。
当浏览器宽度增加时，列数会自动增加，每列宽度会在 180px 与可用空间之间自适应平衡，保持整齐的网格效果。
/* 最小180px、最大1fr的自适应列网格 */
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 16px;
}从 HTML 结构到样式的完整示例
HTML 结构
一个清晰的商品网格通常以一个容器包裹若干商品项，语义化的标签有助于无障碍与 SEO。
示例中，每个商品项包含图片、标题与价格，确保信息的可用性与触控友好，便于搜索引擎解析与屏幕阅读器读取。
完整的 CSS 样例
核心在于将容器设为网格，并应用 grid-template-columns 与 gap，让间距保持一致，且在不同屏幕上自适应。
以下样式实现自适应的商品列表网格：grid-template-columns 与 auto-fill/auto-fit 的组合提供灵活性。
<div class="grid"><div class="product">...</div><div class="product">...</div>
</div>/* CSS 结构化示例 */
.grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));gap: 16px;
}
.product {border: 1px solid #e5e5e5;padding: 12px;background: #fff;
}
.product img { width: 100%; height: auto; display: block; }
.product h4 { margin: 8px 0 4px; font-size: 14px; }
.product .price { color: #e60023; font-weight: bold; }性能与无障碍性考量
减少重排、合并请求
使用网格布局时，应尽量避免复杂的嵌套和冗余的 CSS 选择，以降低浏览器的重排与重绘成本，提升渲染性能。
另外，图片资源应采用懒加载与合适的占位策略，保持网格布局稳定，不因图片加载而导致布局跳动，提升用户感知速度。
无障碍性与可访问性要点
为网格中的商品提供清晰的文本描述，图片加上 alt 属性，确保屏幕阅读器能正确朗读信息。
同时，确保键盘导航友好，聚焦样式显著，方便通过 Tab 键在商品之间进行无障碍浏览。
