Grid布局需显式定义行列结构，否则grid-column等定位无效；grid-template-areas仅是地图，子元素须显式声明匹配grid-area；minmax()+auto-fit实现真响应式；gap替代margin更可靠且全现代浏览器支持。
Grid布局不是“可选技巧”，而是现代HTML页面布局的默认起点——只要父容器设了display: grid，子元素立刻成为可定位的网格项；但若没定义行列结构，grid-column、grid-area等定位全部失效。
为什么写了grid-column: 1 / 3却没效果
根本原因：没声明grid-template-columns或grid-template-rows，网格线压根不存在。
- 浏览器不会自动创建列数；
display: grid只开启网格上下文，不生成任何可见网格线 - 哪怕只想要“按内容自动分列”，也得写
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))这类显式模板 -
grid-auto-columns和grid-auto-rows只是兜底机制，仅对超出模板范围的隐式网格生效，不能替代显式定义
grid-template-areas为什么总不生效
它只是一张“地图”，不负责“派兵”——子元素必须显式声明匹配的grid-area，且名称需完全一致（包括引号、空格、换行）。
- 常见错误：写了
grid-template-areas: "header header" "main sidebar"，但子元素漏写grid-area: header，结果所有内容仍按默认流排列 - 区域名只能是合法标识符（如
header），不能含中划线、数字开头，也不能带引号以外的符号 - 每行必须用独立引号包裹，单词间用单个空格分隔；多一个空格、少一个引号、跨行不对齐，整条规则都会被CSS解析器丢弃（DevTools里能看到被划掉的样式）
- 若某子元素同时写了
grid-area和grid-column，后者会覆盖前者，区域模板对该元素彻底失效
怎么用minmax() + auto-fit实现真响应式
硬写px或%列宽，在不同屏幕下极易溢出或留白；fr + minmax()才真正解决“既要最小可用宽度，又要弹性撑满”的矛盾。
-
1fr不是“1份像素”，而是“剩余可用空间的等分单位”，依赖于容器宽度和其他轨道尺寸 -
minmax(250px, 1fr)表示：这一列至少250px，最多占满剩余空间；比单纯写1fr更安全 -
repeat(auto-fit, minmax(250px, 1fr))：尽可能多放不小于250px的列，空轨道会被折叠；auto-fill则保留空槽，实际响应式中几乎总是用auto-fit - 别再为不同断点写一堆
@media——一行模板就能覆盖手机到桌面
gap为什么比margin更可靠
给每个网格项写margin-right/margin-bottom模拟间隙，会导致最后一行/列多出空白，还容易触发margin collapse或响应式错位。
-
gap是容器级属性，只作用于项目之间的空隙，不影响外边距逻辑 - 所有现代浏览器（Chrome 66+、Firefox 61+、Safari 10.1+、Edge 16+）均已原生支持，无需前缀
-
gap已取代grid-gap（后者在CSS Grid Level 2中被统一为更通用的gap）；继续用grid-gap不报错，但属冗余写法 - 注意：
gap对display: inline-grid无效；若网格项用了float或position: absolute，它们会脱离网格流，gap也不起作用
最常被忽略的一点：网格线编号从1开始，不是从0；写grid-column: -2 / -1是最后一列，但旧版Safari对span语法支持不稳定，生产环境建议优先用具体线号而非简写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
