grid-template-areas是css grid中唯一支持语义化区域名一次性定义整体布局的声明方式，通过引号包裹的字符串直观排布header、main等区块，需每行列数一致、用.占位、配合grid-area绑定且大小写严格匹配。
grid-template-areas 是实现复杂页面布局最直观、最不易出错的起点
直接用文本模板定义结构，比手动计算行列索引快得多，也更易维护。只要容器子元素都带 grid-area 名称，就能一眼看清整体排布。
- 必须确保所有网格项都是容器的直接子元素，嵌套一层就失效
-
grid-template-areas每行字符串必须列数一致，空格分隔，缺失区域用.占位（比如"header header ."） - 行高列宽需配套设置：
grid-template-columns和grid-template-rows不能缺，否则区域会塌缩或溢出 - 命名区域名不能含空格或特殊符号，只支持字母、数字、连字符（如
main-content可以，main content不行）
repeat() + minmax() 组合是响应式卡片网格的核心
不用写媒体查询也能自适应屏幕宽度，关键在理解 auto-fit 和 auto-fill 的行为差异：
-
repeat(auto-fit, minmax(300px, 1fr))：优先拉伸已有列，填不满时列宽收缩至最小值（300px），列数可能减少 -
repeat(auto-fill, minmax(300px, 1fr))：先按最小宽度尽可能多铺列，即使留白也不合并 - 实际项目中
auto-fit更常用，它更符合“内容优先”的视觉预期 - 注意
gap会影响可用空间计算，如果卡片总宽 + 间隙 > 容器宽，就会触发换行或缩列
grid-column 和 grid-row 跨行列时容易漏掉起始线编号
很多人写 grid-column: span 2 就以为能跨两列，但实际效果取决于当前项默认从哪条线开始——它由 DOM 顺序和自动流位置决定，不是固定从第 1 列起。
- 显式指定起止线更可控：
grid-column: 2 / 4表示从第 2 条竖线到第 4 条竖线（即占第 2、3 列） -
span是相对当前隐式起始线的偏移，调试时建议先加outline: 1px solid red看真实网格线位置 - 跨行时同理，
grid-row: span 3不等于“占三行”，而是“从当前行开始往下跨三行”，若当前行已是最后一行，就会溢出容器
fr 单位不是百分比，它分配的是剩余空间
常见误解是认为 1fr 2fr = “33% 和 66%”，但前提是没其他固定尺寸轨道。一旦混入 200px 或 auto，fr 只分剩下的部分。
-
grid-template-columns: 200px 1fr 2fr：第一列固定 200px，剩下空间按 1:2 分给后两列 -
auto轨道按内容撑开，再算剩余空间；minmax(200px, 1fr)是混合策略，最小 200px，有余量才扩展 - 如果所有列都是
fr，那才是等比分配；但生产环境几乎总会混用单位，得按实际计算逻辑预判结果
真正卡住多数人的不是语法，而是忘记 Grid 容器需要明确尺寸约束
display: grid 本身不提供高度/宽度，父容器若无尺寸（比如 height: auto），1fr 行高或 minmax() 列宽就失去参照，导致布局塌陷或溢出。
- 全局布局常加
height: 100vh或min-height: 100vh锁定容器高度 - 卡片网格则依赖父容器宽度，若外层是
div未设宽，它默认width: auto（即 100%），但内部minmax()仍可能因 padding/margin 计算偏差而错行 - 最稳妥做法：对 Grid 容器设
box-sizing: border-box，并检查是否被外层flex或float干扰了尺寸继承
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
