直接写数字（如100px、1fr）最安全；混合单位时需防隐式轨道干扰，未声明行列默认auto；用repeat()简化重复结构；避免混用grid-template-与grid-auto-；定位用线号最稳；响应式需媒体查询重写模板；grid-template-areas须严格对齐列数并用.占位。
grid-template-rows 和 grid-template-columns 的值到底怎么写才不踩坑
直接写数字（比如 100px、1fr）最安全，但混合单位时容易被隐式轨道干扰。浏览器会把没显式声明的行/列当成 auto 处理，结果布局“看起来没生效”——其实只是被撑开了。
-
grid-template-rows: 100px 1fr;只定义了两行，第三行内容会自动创建新行，且默认高度为auto，不受你前面规则约束 - 用
repeat()简化重复结构，比如repeat(3, 1fr)比手写1fr 1fr 1fr更可靠，也方便后期增减 - 避免在同一个网格容器里混用
grid-template-rows和grid-auto-rows，除非你明确想让后续行走自动模式——否则它们会打架
多行多列交叠区域怎么精准定位元素
靠 grid-row 和 grid-column 的起止线号最稳，比用名字更少依赖命名是否正确定义。线号从 1 开始，向右/向下递增，负数从末尾倒数。
-
grid-column: 2 / 4;表示从第 2 条竖线开始，到第 4 条竖线结束（即跨两列） - 如果用了
grid-template-columns: [start] 1fr [mid] 1fr [end];，那grid-column: start / end;才能生效；但一旦漏写某个命名，整个选择器就失效 - 交叠区域（比如一个卡片要横跨顶部两列+第二行整行），得拆成两个独立声明：
grid-column: 1 / -1;+grid-row: 2 / 3;，不能指望单个值覆盖非矩形区域
响应式下 grid-template-rows/columns 怎么动态切换
媒体查询里重写 grid-template-rows 或 grid-template-columns 是唯一干净方案，CSS Grid 不支持像 Flex 那样用 flex-wrap 自动折行。
- 移动端常把多列变单列：
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } } - 别试图用
minmax(300px, 1fr)一劳永逸——它只控制单列宽度范围，不改变列数；真要变列数，必须重写grid-template-columns - 如果列数变化大（比如桌面 4 列 → 平板 2 列 → 手机 1 列），建议用
repeat(auto-fit, minmax(300px, 1fr)))配合grid-auto-flow: column;，但注意这已脱离显式模板控制，进入自动布局范畴
为什么 grid-template-areas 写着写着就错位了
grid-template-areas 对空格和换行极其敏感，每个字符串必须严格对应一行，且每行引号内单词数必须等于 grid-template-columns 定义的列数。
立即学习“前端免费学习笔记（深入）”；
- 下面这段会失败：
grid-template-areas: "header header" "main sidebar";—— 第一行只有两词，第二行也是两词，但如果grid-template-columns是1fr 1fr 1fr（三列），就会报错或错位 - 空白区域必须用
.占位，不能留空格或省略，比如"header header ." "main . sidebar" - 名字里不能有短横线或数字开头，
grid-area: user-profile;是非法的，得写成user_profile或加引号"user-profile"（但引号仅限grid-template-areas值内部）
grid-template-*）和自动布局（grid-auto-*）的边界。一旦子项数量超出模板定义的行列数，后续项立刻转入自动流，样式表现会突然“脱轨”。要么全用显式模板配好所有可能区域，要么主动用 grid-auto-flow: dense; 加控制，但后者可能打乱视觉顺序。 
