掌握css grid布局的关键是理解“画棋盘→摆棋子→调位置→控对齐”四阶段：先用grid-template-columns/rows定义网格结构，再用grid-column/row定位项目，接着用gap和grid-auto-flow调控间距与流向，最后通过justify/align-content/items实现双层对齐。
掌握 CSS Grid 布局，不需要死记所有属性，关键是按逻辑顺序理解“画棋盘 → 摆棋子 → 调位置 → 控对齐”这四个阶段。从 grid-template-columns 到 align-items 的学习路径，本质是沿着容器→项目→对齐的层级逐步深入。
第一步：先搭骨架——定义网格结构
这是 Grid 的起点，只作用于容器（父元素），目标是明确“有多少行、多少列、每行每列多宽多高”。
-
必须写
display: grid，否则其他 Grid 属性无效；inline-grid适合内联级布局场景 -
grid-template-columns决定列：支持100px（固定）、1fr（等分剩余空间）、33.33%（百分比）、auto（内容自适应）、minmax(200px, 1fr)（最小200px，最大可伸展） -
grid-template-rows决定行：用法和列完全一致；常用组合如auto 1fr auto（头部/内容/底部三段式） - 简化重复写法：
repeat(4, 1fr)等价于1fr 1fr 1fr 1fr；命名线如[header-start] 1fr [main-start]后续可语义化引用
第二步：再放内容——定位单个网格项
当容器有了格子，子元素（即网格项）默认按“自动流”从左到右、从上到下填入。若需精确控制位置，就用项目级属性。
-
grid-column-start / grid-column-end：指定起始/结束的垂直网格线编号或名称，例如grid-column: 2 / 4表示跨第2线到第4线（即占2列） -
grid-row-start / grid-row-end：同理控制行方向，grid-row: 1 / -1可让项目从顶到底铺满所有行 - 简写形式更常用：
grid-column: 2 / 4或grid-area: 1 / 2 / 3 / 4（顺序为 row-start / col-start / row-end / col-end） - 配合
grid-template-areas可实现可视化布局：在容器中用字符串命名区域（如"header header" "nav main"），项目用grid-area: "header"直接归位
第三步：调间距与填充逻辑
格子之间有空隙，项目超出显式网格时如何处理？这些属于“增强型容器控制”。
立即学习“前端免费学习笔记（深入）”；
-
gap（或row-gap+column-gap）统一设置行列间隙，比如gap: 12px 8px（先行距后列距） -
grid-auto-flow控制未定位项目的流向：row（默认，逐行填）、column（逐列填）、加dense（启用紧凑算法，回填前面空缺） - 隐式网格补充：
grid-auto-rows: 80px设定自动创建的行高度，避免内容撑开后高度失控
第四步：对齐控制——从容器内到单元格内
对齐分两层：一是整个网格内容在容器中的摆放（justify/align-content），二是每个项目在其所在单元格里的姿态（justify/align-items）。
-
justify-content：水平方向（主轴）对齐整个网格内容，值如start、center、stretch（默认拉满） -
align-content：垂直方向（交叉轴）对齐整组行轨道，仅当有多余空间（比如总行高小于容器高）时才生效 -
justify-items：所有项目在各自单元格内的**水平对齐方式**，如center让每个项目居中显示 -
align-items：所有项目在各自单元格内的**垂直对齐方式**，配合justify-items实现真正的居中卡片效果 - 快捷写法：
place-items: center=justify-items: center; align-items: center
不复杂但容易忽略：Grid 是二维系统，它不依赖浮动、清除、行内块等老办法；只要容器设了 display: grid，子元素就自动成为网格项，无需额外声明。真正要花时间的是建立“线→轨→区→项”的空间直觉，而不是背属性列表。
