用css grid搭建电商首页商品橱窗，核心三点：容器设display: grid、列数用repeat(auto-fill, minmax(280px, 1fr))自动响应、商品卡片统一语义结构与样式增强。
直接用 CSS Grid 搭建电商首页的商品橱窗，清晰、响应、易维护，比浮动或老式表格靠谱得多。核心就三点：容器设为 grid、列数自动适配、每个商品卡片样式统一。
商品容器用 display: grid 启动布局
给包裹所有商品的父容器（比如 <section class="product-grid"></section>）加上：
-
display: grid—— 激活二维网格系统 -
gap: 16px—— 控制商品卡片之间的间距（行列统一） -
padding: 16px—— 让边缘留白，避免贴边
列数按屏幕宽度自动调整
别写死“3列”或“4列”，用 repeat() + minmax() 实现真正响应式：
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))- 意思是：每列最小 280px（保证手机上至少能看清图和标题），最大占满剩余空间的等分份额（
1fr） - 当屏幕变宽，自动塞进更多列；变窄时自然回退为单列，无需媒体查询
每个商品卡片结构简洁且语义化
每个 <article class="product-card"></article> 推荐包含：
-
<img src="..." alt="商品名">—— 必须带 alt，提升可访问性 -
<h3>商品标题</h3>—— 用 h3 保持层级语义 -
<p class="price">¥199</p>—— 单独样式控制价格颜色/大小 -
<button>加入购物车</button>—— 操作按钮不依赖 JS 就可点击
卡片自身加 border-radius: 8px 和 overflow: hidden，图片就能圆角裁切，整体更精致。
额外增强体验的小细节
不用大改结构，加几行 CSS 就能明显提升专业感：
- 给图片设
width: 100%; height: 200px; object-fit: cover;—— 统一高度、不拉伸 - 标题加
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;—— 限制两行，防文字撑破卡片 - 悬停时加
transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08);—— 微动效增加交互反馈
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
