桌面端用 repeat(4, 1fr)，平板用 repeat(2, 1fr)，手机用 1fr，配合媒体查询实现响应式商品列数控制，无需 flex-wrap 或 JS 计算。
直接用 display: grid 搭电商原型，5 分钟内能跑通桌面+移动端基础布局，关键不是写全功能，而是让结构先立住、内容能对齐、响应式不崩。
怎么用 grid-template-columns 控制商品列数？
桌面端固定 4 列、平板 2 列、手机 1 列，靠的是 grid-template-columns 配合媒体查询，而不是手动写 flex-wrap 或 JS 计算 —— 这是 Grid 最省力的地方。
- 桌面：用
repeat(4, 1fr)，4 列等宽，自动均分容器宽度 - 平板（768px–1024px）：改用
repeat(2, 1fr)，两列并排，间隙用gap: 16px统一控制 - 手机（1fr，单列满宽，避免横向滚动
- 别硬写像素值，
fr单位天然适配内容高度差异，比minmax(300px, 1fr)更轻量（后者适合卡片内容长度不一的场景，但原型阶段优先求快）
为什么用 grid-template-areas 而不是 grid-column 手动定位？
原型阶段要快速验证“顶部筛选栏 + 商品网格 + 页脚”这三块是否逻辑清晰，grid-template-areas 一眼就能看出区域关系，改起来也只动一行字符串。
- 例如：定义
grid-template-areas: "filter filter" "products products" "footer footer"，再给对应元素加grid-area: filter就完事 - 如果后期要加广告横幅，只需在字符串里插入一行
"ad ad"，不用重算所有grid-column-start - 注意：命名区域必须和 HTML 元素的
grid-area值完全一致，大小写敏感，拼错会留白 - 别在
grid-template-areas里写空格或换行符，CSS 解析器会报错，比如"header header"中间两个空格就失效
商品卡片高度不一致怎么办？
标题长短不同、图片加载延迟，都会导致卡片高度参差 —— 原型阶段最怕视觉散乱，grid-auto-rows 是比 JS 补齐更稳的解法。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 设
grid-auto-rows: minmax(300px, auto)，保证每行至少 300px 高，内容多时自动撑开 - 配合
align-items: start，让所有卡片顶部对齐，比stretch更符合电商展示习惯 - 图片统一用
aspect-ratio: 4/3+object-fit: cover，避免拉伸变形；没图时用背景色占位，别留空白 - 别依赖
height: 300px硬设，否则文字溢出会被裁剪，原型没法看清文案效果
悬停效果和响应式断点怎么写才不拖慢原型？
原型不是生产代码，交互只为示意，CSS 动画越少越快，断点数量控制在 2–3 个以内足够覆盖主流设备。
- 悬停只做
transform: scale(1.02)+box-shadow: 0 2px 8px rgba(0,0,0,0.1)，别加transition: all .3s，默认就有平滑过渡 - 断点选
@media (max-width: 1024px)和@media (max-width: 768px)两个就够了，iPad Pro 宽屏走桌面逻辑，小屏安卓机走手机逻辑 - 所有颜色、间距用 CSS 变量定义，比如
--gap: 16px、--primary: #ff6b6b，换主题时改两行就行 - 别在原型里写
@supports (display: grid)兜底，现代浏览器已全支持，真要兼容 IE 就不该用 Grid 做原型
真正卡住进度的往往不是 Grid 语法，而是图片占位、文字截断、按钮点击反馈这些细节——原型阶段先用纯色块+短文案占位，确认结构成立后再补内容，节奏才不会乱。
