grid布局中grid-template-areas顺序写错会导致banner和商品列表叠在一起；需确保行数匹配、区域名一致、子元素设正确grid-area，且避免空值。
Grid布局中grid-template-areas写错顺序，Banner和商品列表会叠在一起
电商首页最常踩的坑：用grid-template-areas定义区域时，字符串行数和实际grid-template-rows不匹配，或者区域名拼错（比如写成"banner"但实际用class="baner"），导致所有内容挤进第一格。
实操建议：
- 先定行高：
grid-template-rows: 300px 1fr;—— Banner固定高，商品列表占剩余空间 - 再配区域：
grid-template-areas: "banner" "list";，注意引号内每行对应一行，空格分隔列（单列就不用空格） - 每个子元素必须设
grid-area，比如grid-area: banner;，名字要和grid-template-areas里完全一致（区分大小写） - 别在
grid-area里写""或none，CSS不会报错，但该元素就“消失”了（其实是被挤到网格外）
商品列表用grid-auto-flow: column后卡片横向溢出容器
想让商品卡片从左到右、换行向上排（类似瀑布流错位），容易直接套用column流向，结果卡片全堆在第一列，水平撑破父容器。
原因在于grid-auto-flow: column只控制自动放置顺序，不控制列宽；它默认每列等宽且不限制列数，浏览器会不断新建列来塞内容。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 改用
grid-auto-flow: row;+grid-template-columns: repeat(auto-fill, minmax(240px, 1fr))——这才是响应式商品列表的正解 - 如果真要列优先（比如竖排价格标签场景），必须加
grid-auto-columns: 240px;限定每列宽度，并用overflow-x: auto包住容器防溢出 -
minmax(240px, 1fr)里的240px是关键下限，小屏也能保卡片可读；写成200px可能在iPhone上把文字挤变形
IE11里grid-gap失效，Banner和商品列表贴太近
IE11支持Grid，但只认-ms-grid-gap，而且仅对显式网格（grid-template-columns/rows）生效；如果用grid-auto-rows生成行，grid-gap在IE里直接被忽略。
实操建议：
- 给商品项单独加
margin-bottom: 20px;作为IE兜底，别依赖grid-gap统一控制间距 - 避免在IE兼容项目中混用
grid-auto-rows和grid-gap，改用grid-template-rows: repeat(5, 280px);这类显式定义 - 用
@supports (display: grid) and (not (display: -ms-grid))隔离现代浏览器样式，IE走独立规则
用grid-column: span 2让Banner横跨两列时，响应式断点失效
PC端Banner设grid-column: span 2没问题，但到平板（max-width: 768px）想让它变回单列，只改grid-template-columns不够——旧的span 2还在生效，Banner会强行拉宽，压扁旁边内容。
实操建议：
- 断点里必须重置
grid-column：@media (max-width: 768px) { .banner { grid-column: span 1; } } - 别用
grid-column: 1 / -1试图“全占”，它在隐式网格里行为不稳定，尤其当父容器grid-template-columns没定义满时 - 如果Banner本身含图片，记得同步调
img { width: 100%; height: auto; }，否则span 2拉宽后图片不缩放，会模糊或溢出
Grid编排电商首页，最难的不是写对语法，而是每个grid-属性都得在多个断点、多种内容长度、IE和现代浏览器之间保持行为一致。稍漏一个重置，Banner就盖住商品，或者商品列表突然塌成一列。
