display: grid 是现代布局的默认起点，需先设父容器为 grid，再用 grid-template-columns 和 grid-template-rows 定义行列结构，网格线从 1 开始编号，支持负数和 span 跨格。
什么是 display: grid？别一上来就写 grid-template-areas
它不是“高级 css”——而是现代布局的默认起点。只要容器设了 display: grid，它的直接子元素就自动变成网格项（grid items），无需额外包裹或定位。但常见错误是：在没定义行/列结构前，就急着用 grid-area 或 grid-template-areas，结果页面完全没变化。
真正该先做的只有三件事：
- 给父容器加
display: grid - 用
grid-template-columns定义列宽（比如1fr 2fr auto） - 用
grid-template-rows定义行高（比如100px 1fr）
没有这两条模板声明，grid-column、grid-row 等定位属性基本无效——因为网格线根本不存在。
grid-column 和 grid-row 怎么数线？从 1 开始，不是从 0
网格线编号永远从容器边缘开始：最左边是第 1 条纵线，最上边是第 1 条横线。写 grid-column: 2 / 4 表示“从第 2 条线开始，到第 4 条线结束”，跨两列。容易错的是把“第 2 列”当成 grid-column: 2——其实这是简写，等价于 2 / 3，只占一格。
立即学习“前端免费学习笔记（深入）”；
实用技巧：
- 用负数反向计数：
grid-column: -2 / -1是最后一列 - 用
span显式跨格：grid-column: 1 / span 2比1 / 3更易维护 - 不写
/就是起始线 + 自动结束（即占 1 格）
注意：firefox 和 chrome 对负线号支持一致，但旧版 safari（span 语法有兼容问题，生产环境建议用具体线号。
为什么 grid-gap 被废弃了？改用 gap 就行
grid-gap 在 CSS Grid Level 1 中存在，但 Level 2 已统一为更通用的 gap，且同时作用于 flex 和 grid 容器。现在所有主流浏览器（包括 Safari 14.1+）都支持 gap，继续用 grid-gap 不报错，但属于冗余写法。
实际替换很简单：
-
grid-gap: 10px→gap: 10px -
grid-column-gap: 8px; grid-row-gap: 12px→column-gap: 8px; row-gap: 12px
注意：gap 对 display: inline-grid 无效；如果网格项用了 float 或 position: absolute，它们会脱离网格流，gap 也不起作用。
响应式 grid 布局别硬套媒体查询，优先用 minmax() 和 auto-fit
为不同屏幕写一堆 @media 块，不如一行 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr))。这句的意思是：“尽可能多放宽度不小于 250px 的列，每列均分剩余空间”。它比手动断点更灵活，也避免了“小屏三列挤成一团”的问题。
关键点：
-
auto-fit会合并空轨道，auto-fill则保留空位 -
minmax(250px, 1fr)中的1fr是上限，不是固定值 - 如果内容高度差异大，记得加
align-items: start防止项被拉伸
这个模式在卡片列表、仪表盘组件里几乎可直接复用，但要注意：IE 完全不支持 repeat(auto-fit)，需要降级方案（如用 display: flex + flex-wrap）。