display: grid（或inline-grid）是启用css网格布局的唯一方式，设于父容器后子元素才成为网格项；grid-template-columns/rows定义轨道，gap控制间隙，grid-column/row或grid-area用于定位。
display: grid 是开启网格布局的唯一入口
不是加个 class 或引入某库，CSS 网格布局的启动开关只有 display: grid（或 display: inline-grid）。它一设，元素立刻变成网格容器，子元素自动成为网格项——没这句，后面所有 grid-template-columns、grid-gap 都不生效。
常见错误现象：grid-column 写了但完全没反应；开发者反复检查语法，却漏掉父容器根本没设 display: grid。
- 必须作用于直接父容器，不能靠继承
-
display: grid会重置元素的默认文档流行为（比如 float、vertical-align 失效） - 如果只是想让某几个子元素用网格对齐，别在 body 或大 wrapper 上盲目加，容易破坏整体布局结构
grid-template-columns 和 grid-template-rows 定义轨道尺寸
设完 display: grid 后，真正画出“格子”的是 grid-template-columns 和 grid-template-rows。它们不是可选配置，而是网格存在的基础骨架。
使用场景：三栏布局、响应式卡片栅格、表单字段对齐、等宽按钮组。
立即学习“前端免费学习笔记（深入）”；
-
grid-template-columns: 1fr 2fr 1fr表示三列，中间列占两倍空间；fr是弹性单位，不是像素，也不等价于 % - 用
repeat(3, 1fr)比写1fr 1fr 1fr更安全，避免手误多写或少写一个值 - 如果只设
grid-template-columns而没设grid-template-rows，行高由内容撑开（auto），不是等高——这点常被误认为“网格没生效”
gap 属性比 margin 更干净地控制间距
网格项之间的空隙，优先用 gap（或 row-gap/column-gap），而不是给每个子项加 margin。
为什么这样做：margin 会破坏网格项的尺寸计算逻辑（比如 1fr 会把 margin 算进分配空间），而 gap 是容器级的纯间隙，不参与轨道划分。
-
gap: 1rem同时设置行列间距；gap: 1rem 0.5rem表示 row-gap 1rem、column-gap 0.5rem - 旧版浏览器（如 IE）不支持
gap，若需兼容，得回退到margin+:nth-child排除首尾，但代价是代码变复杂、易出错 -
gap不影响网格线编号，第 2 条列线仍是 line 2，不会因为加了 gap 就变成 line 3
grid-area 和 grid-column / grid-row 的定位差异
定位网格项时，grid-column 和 grid-row 控制起止线（如 grid-column: 2 / 4 表示从第 2 条线开始，到第 4 条线结束），而 grid-area 是快捷写法，能一次定义四条线或命名区域。
容易踩的坑：把 grid-column: 2 / 4 错写成 grid-column: 2 / 3，结果只占一格却以为该跨两格；或者混淆线号和轨道数（第 2 条线 ≠ 第 2 条轨道）。
-
grid-area: header;前提是容器已用grid-template-areas定义过"header header sidebar"这类字符串 -
grid-column: span 2表示跨两列，等价于grid-column: auto / span 2，但不能写成grid-column: 1 / span 2（起点必须明确或用 auto） - 线号从 1 开始计数，负数从末尾倒数：
grid-column: -2 / -1表示最右边一列
网格线编号、fr 单位的弹性行为、以及 gap 和 margin 的作用层级，这几个地方稍不注意就会让布局“看起来没按预期跑”。实际写的时候，打开浏览器的网格调试工具（DevTools 中勾选“Show grid area names”或“Highlight grid tracks”）比死盯代码快得多。
