CSS Grid

CSS Grid Layout 在容器上建立二维网格格式化上下文 ：同时定义列轨道 / 行轨道 （track）与间隙，直接子元素 成为网格项，并可在两条轴上按网格线 或 grid-template-areas 做显式放置 ；轨道尺寸常配合 fr、minmax()、repeat() 等与剩余空间、最小最大内容约束一起解析。它与以单轴流式分配为主的 Flexbox（一维弹性布局）互补，而非「只是少写嵌套」。读者宜已熟悉 Flex；下文默认现代浏览器实现。

html 复制代码

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > span {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>
<div class="grid-container">
  <span class="item1">1</span>
  <span class="item2">2</span>
  <span class="item3">3</span>
  <span class="item4">4</span>
  <span class="item5">5</span>
  <span class="item6">6</span>
  <span class="item7">7</span>
  <span class="item8">8</span>
  <span class="item9">9</span>
  <span class="item10">10</span>
  <span class="item11">11</span>
  <span class="item12">12</span>
  <span class="item13">13</span>
  <span class="item14">14</span>
  <span class="item15">15</span>
  <span class="item16">16</span>
  <span class="item17">17</span>
  <span class="item18">18</span>
  <span class="item19">19</span>
  <span class="item20">20</span>
  <span class="item21">21</span>
  <span class="item22">22</span>
  <span class="item23">23</span>
  <span class="item24">24</span>
  <span class="item25">25</span>
  <span class="item26">26</span>
  <span class="item27">27</span>
  <span class="item28">28</span>
  <span class="item29">29</span>
  <span class="item30">30</span>
</div>

</body>
</html>

一、属性逐项（容器）

以下均写在 Grid 容器 （display: grid / inline-grid）上，影响 直接子元素 的网格排版（后代不参与本层切格）。

`display: grid` · `display: inline-grid`

css 复制代码

.grid-container {
  display:grid;
  ...
}

谁进网 ：只有 直接子元素 参与这一层网格（可跨多格）；孙子不参与。
两种容器 ：grid 对外像大块（独占一行）；inline-grid 对外像 行内小块 （可和文字并排），里面都是网格。
没写行列模板 ：常见 一列、多行，子元素从上往下挨个占一行；宽多半拉满容器。
行内元素当儿子 ：span / a 等进了网也会 按块一样占格子 （默认还会拉高撑满格子），这是规定，不能靠再给儿子写 display: inline 在 父网里 变回行内占位。
子项再写 display ：flex / grid 只管 这个儿子自己的里面 怎么排；要和 网格外 行内混排 → 别让它当这一层的格子成员（套一层或换父级布局）。

`grid-template-columns`

作用：声明 显式列轨道 （几列、每列多宽），生成 列网格线 供放置引用。
影响：列宽、fr 分剩余空间、自动流默认一行几项；与 rows 一起决定格子形状。

配置要点 ：

多列 = 多段值 （空格分隔，一段 = 一列宽）：

css 复制代码

grid-template-columns: 100px 100px 100px; /* 三列，每列 100px */
grid-template-columns: 20% 60% 20%; /* 三列，按父宽的 20% / 60% / 20% */
grid-template-columns: 200px 1fr 2fr; /* 左列 200px，余下按 1:2 分给两列 */
grid-template-columns: auto auto; /* 两列，列宽随内容 */
grid-template-columns: min-content max-content; /* 两列：最紧内容宽 / 最松内容宽 */

函数轨 ：minmax / fit-content / 固定次数 repeat：

css 复制代码

grid-template-columns: minmax(200px, 1fr); /* 最小 200px，再大则吃剩余空间 */
grid-template-columns: 12rem 1fr minmax(0, 1fr); /* 左定宽 + 中间伸缩 + 右列可压到 0 防溢出 */
grid-template-columns: fit-content(300px); /* 随内容，但不超过 300px */
grid-template-columns: repeat(4, 80px); /* 四列，每列 80px */

响应式多列 （auto-fill / auto-fit：子项少于列槽且只占一行 时差最大；槽全被占满时常差不多）：
css 复制代码
```
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 空槽保留 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 空槽折叠，余列拉宽 */
```
- 口算列槽 ：宽 600px 、gap: 0、minmax(200px,1fr) → 600÷200，一行最多 3 槽。
- 只 2 个子项 （一行里仍有 3 个列槽时）：auto-fill 只占前两格 ，第三格空着 ；auto-fit 也占两格，但会把列宽拉大 ，两格加起来刚好铺满整行。
- 子项 ≥ 3 占满三槽 ：两种都像三列，差别小。
给列线起名 / 不写显式列 ：
- [名字] ：贴在某一列轨道的 前、后 ，给那条 竖网格线 起名；子项写 grid-column: 左线名 / 右线名 就能对齐，不必数 1 / 3 这种数字线号。
- [col1] 1fr [col2] 2fr [col3] ：只有两列（左 1fr、右 2fr）；col1＝整网最左竖线，col2＝ 两列中间 竖线，col3＝最右竖线------三个名字对应 三条界，不是三列等宽。
css 复制代码
```
grid-template-columns: [col1] 1fr [col2] 2fr [col3]; /* 两列；左/中/右三条命名竖线 */
/* 只占左列：grid-column: col1 / col2;   只占右列：grid-column: col2 / col3; */
grid-template-columns: none; /* 不显式声明列 → 常见为隐式 1 列 */
```

`grid-template-rows`

作用：声明 显式行轨道 （几行、每行多高），生成 行网格线。
影响：行高、纵向剩余空间；行数超出显式行时出现 隐式行 （高由 grid-auto-rows）。

配置要点 （与 grid-template-columns 语法对称 ，只是管横轴）：

多行 = 多段值 （空格分隔，一段 = 一行高）：

css 复制代码

grid-template-rows: 48px 48px 48px; /* 三行，各行 48px */
grid-template-rows: auto 1fr auto; /* 头尾随内容，中间行吃满剩余高度 */
grid-template-rows: minmax(64px, auto) 1fr; /* 首行至少 64px，第二行占余高 */

函数轨 / repeat ：

css 复制代码

grid-template-rows: repeat(4, minmax(0, 1fr)); /* 四行等高分高 */

给行线起名 / 不写显式行 ：

css 复制代码

grid-template-rows: [top] 80px [mid] 1fr [bot]; /* 两行；上/中/下三条命名横线 */
grid-template-rows: none; /* 不显式声明行 → 多靠隐式行接子项 */

`grid-template-areas`

作用：用 同名矩形区域 给格子起名，多行字符串是一张「字符画」。
影响：和 grid-template-rows / columns 一起定版式；子项写 grid-area: 名字 落进对应区。

配置要点 ：

同一区域名在字符串里必须是 完整矩形 。在 grid-template-areas 的字符串里，. 表示这一格在模板里占位，但不产生任何区域名。

字符串里 一格 = 模板里的一格 ；列数由最长那一行决定，短行可省略尾部（或补 .）。

css 复制代码

grid-template-areas:
  "head head"
  "side main"
  "foot foot";
header { grid-area: head; }
aside  { grid-area: side; }
main   { grid-area: main; }
footer { grid-area: foot; }

css 复制代码

grid-template-areas:
  "a a ." /* 在 grid-template-areas 的字符串里，. 表示这一格在模板里占位，但不产生任何区域名 */
  "b c c";
.item-a { grid-area: a; }
.item-b { grid-area: b; }
.item-c { grid-area: c; }

`grid-template`（缩写）

作用：把 rows、columns、areas 里允许的组合 一条属性写完（分支多）。
影响：等价于改对应的 grid-template-rows / columns / areas。
配置要点 ：易写错；维护优先时建议 拆开写 三个 grid-template-*。简例（仅示意，复杂写法见规范）：
css 复制代码
```
grid-template:
  "a a" 40px
  "b c" 1fr
  / 120px 1fr; /* 上行 areas + 行高；/ 后是 columns */
```

`grid-auto-columns`

作用：规定 隐式列（多出来的列轨）每条多宽。
影响：显式 columns 不够放、或 grid-auto-flow: column 自动 往右长列 时用。

配置要点 ：

css 复制代码

grid-auto-columns: 200px; /* 每根隐式列固定 200px */
grid-auto-columns: minmax(100px, 1fr); /* 隐式列最小 100px，再大则分剩余宽 */

`grid-auto-rows`

作用：规定 隐式行（多出来的行轨）每条多高。
影响：显式 rows 不够放、子项继续往下排时出现的新行高度。

配置要点 ：

css 复制代码

grid-auto-rows: auto; /* 隐式行高随内容（常见默认） */
grid-auto-rows: minmax(80px, auto); /* 隐式行至少 80px，再高随内容 */

`grid-auto-flow`

作用：没写 grid-column / grid-row 的项，按什么方向 自动往里塞 ，以及是否 dense 填洞。
影响：先填行还是先填列、会不会多造隐式轨；dense 会改 视觉顺序（键盘焦点慎用）。

配置要点 ：

css 复制代码

grid-auto-flow: row; /* 默认：先横着排满一行再换行 */
grid-auto-flow: column; /* 先竖着排满一列再开新列 */
grid-auto-flow: row dense; /* 行优先 + 尽量填空洞，可能打乱先后天顺序 */

`row-gap` · `column-gap` · `gap`

作用：轨道与轨道之间 的间隙（不是给「线」加厚）。
影响：行列疏密；和 fr 一起参与空间分配（先扣 gap 再分 fr 等，以浏览器实现为准）。

配置要点 ：

css 复制代码

gap: 12px; /* 行、列同一间隙 */
gap: 12px 20px; /* 先行间隙 12px，再列间隙 20px */
row-gap: 8px;
column-gap: 16px;

`justify-items` · `align-items` · `place-items`

作用：容器统一设 每个格子里面 ，子项沿 列轴（justify）/ 行轴（align） 怎么对齐（默认多数字 stretch）。
影响：所有网格项的默认格内对齐；单项可用 justify-self / align-self 顶掉。

配置要点 ：

css 复制代码

justify-items: center; /* 格内：沿列轴居中 */
align-items: start; /* 格内：沿行轴靠起点 */
place-items: start center; /* 简写：align-items justify-items */

`justify-content` · `align-content` · `place-content`

作用：当 所有轨道加总 仍小于容器（四周还有空）：整块网格在容器里沿列轴 / 行轴怎么摆。
影响：例如整表在视口里 水平居中 ；和 justify-items（格子里对齐）是两层事。

配置要点 （需轨道总尺寸 < 容器才看得出效果）：

css 复制代码

justify-content: center; /* 列方向：网格整体居中 */
align-content: end; /* 行方向：网格整体靠底 */
place-content: center space-between; /* align justify */

`grid`（缩写）

作用：一次揉进 template、auto-flow、隐式轨等，最省字数、最难读。
影响：一改一大片，排查成本高。
配置要点 ：复杂项目少用；细节以 MDN grid 为准。常见一种读法：/ 前多跟 自动流 + 隐式行高 ，/ 后是 grid-template-columns （具体以规范与浏览器解析为准）。
css 复制代码
```
grid: auto-flow 80px / 1fr 1fr; /* 常解析为：行向自动流、隐式行高约 80px、两列各 1fr（以实机为准） */
```

二、属性逐项（网格项）

写在 直接子元素（网格项）上。

`grid-column-start` · `grid-column-end` · `grid-column`

作用：该项占 第几条列线到第几条列线 之间的区域。
影响：占几列、从哪开始；grid-column 是 start / end 的简写，也可用 span n 表跨 n 列。

配置要点 ：

css 复制代码

grid-column-start: 2;
grid-column-end: 4; /* 第 2 线到第 4 线 → 占两列 */
grid-column: 1 / -1; /* 从第 1 线到最后一根线 → 通栏 */
grid-column: span 2; /* 从自动放置起点起跨 2 列 */

`grid-row-start` · `grid-row-end` · `grid-row`

作用：该项占 第几条行线到第几条行线 之间的区域。
影响：占几行；grid-row 为简写，同样有 span。

配置要点 ：

css 复制代码

grid-row: 1 / 3; /* 第 1 线到第 3 线 → 跨两行 */
grid-row: span 2; /* 跨两行 */

`grid-area`

作用：① 接 grid-template-areas 里的 区域名 ；或 ② 四条边线 一次写满矩形。
影响：一项落进命名区，或钉死在一个矩形范围。

配置要点 ：

css 复制代码

grid-area: main; /* 与 areas 里 "main" 同名 */
/* 四线简写：row-start / column-start / row-end / column-end */
grid-area: 1 / 2 / 3 / 4;

四值顺序易混 → 对照 MDN grid-area。

`justify-self` · `align-self` · `place-self`

作用：只改 当前网格项 在 自己那一格 里沿列轴 / 行轴的对齐，覆盖容器的 justify-items / align-items。
影响：仅此一项。

配置要点 ：

css 复制代码

justify-self: end; /* 本项在格内靠列尾 */
align-self: center; /* 本项在格内垂直居中 */
place-self: center end; /* align-self justify-self */

`order`

作用：整数排序键，自动布局 时决定 谁先占坑 （数字小先排）；不改 DOM 顺序。
影响：与 grid-auto-flow 搭配时改 视觉先后；无障碍场景慎用。

配置要点 ：

css 复制代码

order: -1; /* 同组里尽量往前排 */
order: 1; /* 尽量往后排 */

三、与布局相关的周边（可选）

position: absolute 子项 ：包含块与 网格区域 相关，细节见 MDN。
display: subgrid（Grid 2） ：子网格继承父级轨道；须嵌套 Grid；支持度见 caniuse / css-subgrid。

四、易错点

只有 直接子 入格；要一整块占一格先包一层。
fr 分的是 剩余空间 ；内容最小宽度大时轨会被 min-content 等顶宽/顶高。
justify-content 对齐的是 整轨网格 ，justify-items 对齐的是 格子里面的项。
grid-auto-flow: dense 可能让 视觉顺序与 Tab 顺序 不一致。

一、属性逐项（容器）

display: grid · display: inline-grid

grid-template-columns

grid-template-rows

grid-template-areas

grid-template（缩写）

grid-auto-columns

grid-auto-rows

grid-auto-flow

row-gap · column-gap · gap

justify-items · align-items · place-items

justify-content · align-content · place-content

grid（缩写）

二、属性逐项（网格项）

grid-column-start · grid-column-end · grid-column

grid-row-start · grid-row-end · grid-row

grid-area

justify-self · align-self · place-self

order

三、与布局相关的周边（可选）

四、易错点

五、参考

`display: grid` · `display: inline-grid`

`grid-template-columns`

`grid-template-rows`

`grid-template-areas`

`grid-template`（缩写）

`grid-auto-columns`

`grid-auto-rows`

`grid-auto-flow`

`row-gap` · `column-gap` · `gap`

`justify-items` · `align-items` · `place-items`

`justify-content` · `align-content` · `place-content`

`grid`（缩写）

`grid-column-start` · `grid-column-end` · `grid-column`

`grid-row-start` · `grid-row-end` · `grid-row`

`grid-area`

`justify-self` · `align-self` · `place-self`

`order`