Grid能直接描述二维结构，无需嵌套或hack；grid-template-areas命名区域布局适合整页框架，需配合grid-template-columns/rows使用，repeat(auto-fit, minmax())实现响应式卡片网格，grid-column/grid-row控制跨行跨列，gap与对齐属性协同影响视觉效果。
Grid 能直接描述二维结构，不用嵌套、不靠 hack，复杂页面用它写就是比 Flex 清晰、稳定、易维护。
grid-template-areas 命名区域布局适合整页框架
当你需要把 header、sidebar、main、footer 这类语义化区块按固定逻辑排布时，grid-template-areas 是最直观的写法。
- 必须配合
grid-template-columns和grid-template-rows一起用，否则区域会塌陷或错位 - 每行引号内空格分隔列名，换行对应行数；名字重复表示跨列，同一名字出现在多行表示跨行
-
grid-area值必须和grid-template-areas中定义的名字完全一致（区分大小写） - 未被命名的区域会留白，但不会报错——容易误以为“没生效”，其实是漏写了
grid-area
示例：
.layout {
display: grid;
grid-template-areas: "header header"
"sidebar main";
grid-template-columns: 240px 1fr;
grid-template-rows: auto 1fr;
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
repeat(auto-fit, minmax()) 实现响应式卡片网格
传统媒体查询写法在卡片数量动态变化时容易失控，repeat(auto-fit, minmax()) 让 Grid 自动计算列数，更可靠。
立即学习“前端免费学习笔记（深入）”；
-
auto-fit会收缩空轨道，auto-fill则保留空位——多数场景用auto-fit -
minmax(300px, 1fr)表示：单列最小 300px，最大占满剩余空间；浏览器据此决定能放几列 - 如果容器宽度小于
minmax()下限，Grid 会回退为单列，无需额外媒体查询 - 注意：父容器需有明确宽度（比如
width: 100%或设为inline-grid），否则minmax()可能失效
示例：
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
grid-column / grid-row 控制单个项目跨行跨列
Flex 做不到的事，Grid 天然支持：grid-column 和 grid-row 是最轻量的“破格”手段。
-
grid-column: 2 / 4表示从第 2 条列线开始，到第 4 条列线结束（即跨两列） -
grid-row: span 3表示向下跨越 3 行轨道，比写起止线更直观 - 若同时设置
grid-column和grid-row，项目会严格落在指定单元格区域，不受自动放置算法影响 - 容易踩坑：当容器使用
grid-template-areas时，再用grid-column可能导致区域重叠或错位，优先选一种方式统一管理
gap 与 align-items / justify-items 的组合影响视觉对齐
gap 看似简单，但它和对齐属性共同决定了内容在单元格内的实际位置，尤其在混合尺寸项目中容易出偏差。
-
gap只作用于轨道之间，不影响项目内部 padding/margin；别指望它替代内边距 -
align-items: start让所有项目顶部对齐，但若某项目高度远大于其他，底部就会悬空——这时要配合justify-self单独调某个项目 - 当项目设置了
height或min-height，align-items: stretch（默认值）可能被覆盖，需显式重置 - 移动端小屏下，
gap值建议用rem或vw，避免像素固定值导致挤压
真正难的不是语法，而是判断什么时候该用命名区域、什么时候该用线性定位、什么时候该让 Grid 自动放置——这取决于你是否把布局当成“结构描述”而非“像素摆放”。
