团队统一H5项目Grid使用方式，强调移动优先、显式断点、禁用易失控语法、卡片子项规范及响应式兜底检查。
团队在 H5 项目中统一 Grid 使用方式，关键不是堆砌语法，而是建立可落地、易检查、防踩坑的协作约定。重点在于约束“怎么写”和“为什么这么写”，而不是罗列所有属性。
一、列定义必须用移动优先 + 显式断点
禁止直接写 grid-template-columns: 2fr 1fr 或 repeat(3, 1fr) 这类无上下文的固定结构。所有网格容器默认按单列设计：
- 基础样式（无媒体查询）只允许：
grid-template-columns: 1fr，确保手机竖屏天然可用 - 平板起（≥768px）用
@media (min-width: 768px)切双列，如repeat(auto-fit, minmax(300px, 1fr)) - 桌面起（≥1024px）再升为三列或不对称比例，如
2fr 1fr 1fr或"header header" "main sidebar" - 所有断点值统一收口到项目变量文件（如
$breakpoint-tablet: 768px），禁止硬编码
二、禁用易失控的写法
以下写法列入团队 ESLint/CSSLint 规则，CI 构建阶段自动拦截：
- 禁用
auto-fill：一律用auto-fit，避免空列干扰排版 - 禁用
grid-template-columns: 1fr auto：auto在不同内容下宽度飘移，改用minmax(min-content, 1fr)或明确像素值 - 禁用未配
gap的网格：所有display: grid必须声明gap（哪怕为0），禁止靠子项margin控制间距 - 禁用
grid-row: 2 / 4类硬编码行号：跨行必须基于命名线，如grid-row: main / footer，且命名线需在grid-template-rows中显式声明
三、卡片类网格的子项守则
新闻、商品、相册等列表型网格，子元素必须满足以下四条，否则布局失效：
- 卡片必须是网格容器的**直接子元素**，不得包裹在
<div class="wrapper">内 - 卡片自身禁止设置
width、float、display: inline-block或position: absolute - 封面图必须加
width: 100%; height: 100%; object-fit: cover;，容器设aspect-ratio（如4 / 3） - 内边距统一用
rem，禁用px；字体大小按断点分级，小屏1rem，桌面1.125rem
四、响应式兜底与调试共识
不依赖“一次写完就跑通”，而是预留可验证的检查点：
- 每个网格容器父级必须检查：是否有
max-width但没配width: 100%？是否祖先有overflow-x: hidden？ - 开发时强制开启 Chrome DevTools 的 “Layout” 面板，勾选 “Show grid areas” 和 “Highlight grid tracks”，实时验证区域对齐
- 上线前必测三端：iPhone 竖屏（375px）、iPad 横屏（1024px）、1920px 宽桌面，截图存档比对
- 所有
grid-template-areas名字全小写、单词间用短横线（如user-card），HTML 中grid-area值必须完全一致
