【图片版】学习CSS网格布局

青旅半醒 2022-05-26 13:17 270阅读 0赞

# 简言 #

CSS网格布局（Grid）是一套二维的页面布局系统，它的出现将完全颠覆页面布局的传统方式。传统的CSS页面布局 一直不够理想。包括table布局、浮动、定位及内联块等方式，从本质上都是Hack的方式，并且遗漏了一些重要的功能（比如：垂直居中）。Flexbox的出现部分解决了上述问题，但Flex布局是为了解决简单的一维布局，适用于页面局部布局。而Grid天然就是为了解决复杂的二维布局而出现的，适用页面的整体布局。在实际工作中，Grid和Flexbox不但不矛盾，而且还能很好的结合使用。做为WEB程序员，我们在页面布局问题上都付出过努力，也将不断探索新的方案。而Grid是第一个专门为布局问题而生的CSS模块，我们有理由对Grid充满期待。

本文包括18个小节，62个实例，完整阅读需要时间20分钟以上。

为了获得最佳的阅体验，可以访问如下格式的教程：

[学习CSS网格][CSS]

## 1 网格容器 ##

将属性 `display` 值设为 `grid` 或 `inline-grid` 就创建了一个网格容器，所有容器直接子结点自动成为网格项目。

### 1.1 例1 ###

grid { display: grid; ｝

网格项目按行排列，网格项目占用整个容器的宽度。

![网格容器演示1][1]

[演示程序][Link 1]

### 1.1 例2 ###

grid { display: inline-grid; ｝

网格项目按行排列，网格项目宽度由自身宽度决定。

![网格容器演示2][2]

[演示程序][Link 2]

## 2 显示网格 ##

属性`grid-template-rows`和`grid-template-columns`用于显示定义网格，分别用于定义行轨道和列轨道。

### 2.1 例3 ###

grid { display: grid; grid-template-rows: 50px 100px； ｝

属性`grid-template-rows`用于定义行的尺寸，即轨道尺寸。轨道尺寸可以是任何非负的长度值（px，%，em，等）

网格项目1的行高是50px，网格项目2的行高是100px。

因为只定义了两个行高，网格项目3和4的行高取决于其本身的高度。

![显示网格演示1][1 1]

[演示程序][Link 3]

### 2.2 例4 ###

grid { display: grid; grid-template-columns: 90px 50px 120px； ｝

类似于行的定义，属性`grid-template-columns`用于定义列的尺寸。

因为定义中只有三列，所以项目4，5，6排在新的一行; 并因为它们位于第1，2，3列的轨道上，所以其宽度等于定义中第1，2，3列轨道的宽度。

网格项目的第1列，第2列，第3列的宽度分别是 90px, 50px 和 120px 。

![显示网格演示2][2 1]

[演示程序][Link 4]

### 2.3 例5 ###

grid { display: grid; grid-template-columns: 1fr 1fr 2fr； ｝

单位`fr`用于表示轨道尺寸配额，表示按配额比例分配可用空间。

本例中，项目1占 1/4 宽度，项目2占 1/4 宽度，项目3占 1/2 宽度。

![显示网格演示3][3]

[演示程序][Link 5]

### 2.4 例6 ###

grid { display: grid; grid-template-columns: 3rem 25% 1fr 2fr； ｝

单位`fr`和其它长度单位混合使用时，`fr`的计算基于其它单位分配后的剩余空间。

本例中，`1fr = (容器宽度 - 3rem - 容器宽度的25%) / 3`

![显示网格演示4][4]

[演示程序][Link 6]

## 3 轨道的最小最大尺寸设置 ##

函数`minmax()`用于定义轨道最小/最大边界值。

### 3.1 例7 ###

grid { display: grid; grid-template-rows: minmax(100px, auto); grid-template-columns: minmax(auto, 50%) 1fr 3em; ｝

函数`minmax()`接收两个参数：第一个参数表示最小轨道尺寸，第二个参数表示最大轨道尺寸。长度值可以是auto，表示轨道尺寸可以根据内容大小进行伸长或收缩。

本例中，第一行最小高度设置成100px，但是最大高度设置成`auto`，表示行高可以根据内容伸长超过100px。

本例中，第一列宽度的最大值设置成50%，表示其宽度不能超过整个容器宽度的50%。

![轨道的最小最大尺寸设置演示1][1 2]

[演示程序][Link 7]

## 4 重复的网格轨道 ##

函数`repeat()`用来定义重复的网格轨道，尤其适用于有多个相同项目的情况下。

### 4.1 例8 ###

grid { display: grid; grid-template-rows: repeat(4, 100px); grid-template-columns: repeat(3, 1fr); ｝

函数`repeat()`接收两个参数：第一个参数表示重复的次数，第二个参数表示轨道尺寸。

![重复的网格轨道演示1][1 3]

[演示程序][Link 8]

### 4.2 例9 ###

grid { display: grid; grid-template-columns: 30px repeat(3, 1fr) 30px; ｝

函数`repeat()`可以用在轨道定义列表当中。

本例中，第1列和第5列的宽度是30px。函数`repeat()`创建了中间3列，每一列宽度都是`1fr`。

![重复的网格轨道演示2][2 2]

[演示程序][Link 9]

## 5 定义网格间隙 ##

属性`grid-column-gap` 和 `grid-row-gap`用于定义网格间隙。

网格间隙只创建在行列之间，项目与边界之间无间隙。

### 5.1 例10 ###

grid { display: grid; grid-row-gap: 20px; grid-column-gap: 5rem; ｝

间隙尺寸可以是任何非负的长度值（px，%，em等）。

![定义网格间隙演示1][1 4]

[演示程序][Link 10]

### 5.2 例11 ###

grid { display: grid; grid-gap: 100px 1em; ｝

属性`grid-gap`是`grid-row-gap`和`grid-column-gap`的简写形式。

第一个值表示行间隙，第二个值表示列间隙。

![定义网格间隙演示2][2 3]

[演示程序][Link 11]

### 5.3 例12 ###

grid { display: grid; grid-gap: 2rem; ｝

如只有一个值，则其即表示行间隙，也表示列间隙。

![定义网格间隙演示3][3 1]

[演示程序][Link 12]

## 6 用网格线编号定位项目 ##

网格线本质上是用来表示网格轨道的开始和结束。

每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线。

### 6.1 例13 ###

.item1 { grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 3; }

这是一个3行2列的网格，即在行上有4条网格线，在列上有3条网格线。项目1利用网格线编号定位在第2行第2列的位置上。

本例中，项目只跨越一行一列，则`grid-row-end`和`grid-column-end`的定义可以省略。

![用网格线编号定位项目演示1][1 5]

[演示程序][Link 13]

### 6.2 例14 ###

.item1 { grid-row: 2; grid-column: 3 / 4; }

属性`grid-row` 是 `grid-row-start` 和 `grid-row-end`的简写形式。

属性`grid-column` 是 `grid-column-start` 和 `grid-column-end`的简写形式。

如果只指定一个值，它表示 `grid-row/column-start`。

如果两个值都指定，第一个表示 `grid-row/column-start` ，第二个值表示`grid-row/column-end`。而且你必须用斜杠（/）分隔这两个值。

![用网格线编号定位项目演示2][2 4]

[演示程序][Link 14]

### 6.3 例15 ###

.item1 { grid-area: 2 / 2 / 3 / 3; }

属性`grid-area` 是 `grid-row-start`, `grid-column-start`, `grid-row-end` 和 `grid-column-end`的简写形式。

如果四个值都指定，则第一个表示 `grid-row-start`, 第二个表示 `grid-column-start`, 第三个表示 `grid-row-end` ,第四个表示 `grid-column-end`。

![用网格线编号定位项目演示3][3 2]

[演示程序][Link 15]

## 7 网格项目跨越行列 ##

网格项目默认都占用一行和一列，但可以使用前一节中定位项目的属性来指定项目跨越多行或多列。

### 7.1 例16 ###

.item1 { grid-column-start: 1; grid-column-end: 4; }

通过`grid-column-start`和`grid-column-end`属性值的设置，使该网格项目跨越多列。

![网格项目跨越行列演示1][1 6]

[演示程序][Link 16]

### 7.2 例17 ###

.item1 { grid-row-start: 1; grid-row-end: 4; }

通过`grid-row-start`和`grid-row-end`属性值的设置，使该网格项目跨越多行。

![网格项目跨越行列演示2][2 5]

[演示程序][Link 17]

### 7.3 例18 ###

.item1 { grid-row: 2 / 5; grid-column: 2 / 4; }

简写属性 `grid-row` 和 `grid-column` 即能用来定位项目，也能用来使项目跨越多个行列。

![网格项目跨越行列演示1][1 7]

[演示程序][Link 18]

### 7.4 例19 ###

.item1 { grid-row: 2 / span 3; grid-column: span 2; }

关键字 `span` 用来指定跨越行或列的数量。

![网格项目跨越行列演示1][1 8]

[演示程序][Link 19]

## 8 网格线命名 ##

当利用属性`grid-template-rows` 和 `grid-template-columns`定义网格时，可以同时定义网格线的名称。网格线名称可以用于定位网格项目。

### 8.1 例20 ###

grid { display: grid; grid-template-rows: [row-1-start] 1fr [row-2-start] 1fr [row-2-end]; grid-template-columns: [col-1-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-3-end]; ｝

用属性`grid-template-rows` 和 `grid-template-columns`定义网格，同时定义网格线名称。

为避免混淆，网格线名称应避免使用规范中的关键字（`span`等）。

定义网格线名称的方法是要将其放在中括号内（`[name-of-line]`），并要和网格轨道相对应。

![网格线命名演示1][1 9]

### 8.2 例21 ###

grid { display: grid; grid-template-rows: [row-start row-1-start] 1fr [row-1-end row-2-start] 1fr [row-2-end row-end]; grid-template-columns: [col-start] 1fr [col-2-start] 1fr [col-3-start] 1fr [col-end]; ｝

可以给同一网格线定义多个名称，方法就是在中括号内用空格将多个名称分开。

每一个网格线名都可以被引用，以用来定位网格项目。

![网格线命名演示2][2 6]

## 9 用网格线名定位项目 ##

利用命名的网格线，可以很方便地进行项目定位。

### 9.1 例22 ###

.item1 { grid-row-start: row-2-start; grid-row-end: row-end; grid-column-start: col-2-start; grid-column-end: col-end; }

引用网格线名称不用加中括号。

![用网格线名定位项目演示1][1 10]

[演示程序][Link 20]

### 9.2 例23 ###

.item1 { grid-row: row-2-start / row-end; grid-column: col-2-start / col-end; }

简写属性`grid-row` 和 `grid-column`也可以利用网格线名称来定位项目。

![用网格线名定位项目演示2][2 7]

[演示程序][Link 21]

## 10 用同名网格线命名和定位项目 ##

函数`repeat()`可以定义同名网格线。这节省了给每条网格都命名的时间。

### 10.1 例24 ###

grid { display: grid; grid-template-rows: repeat(3, [row-start] 1fr [row-end]); grid-template-columns: repeat(3, [col-start] 1fr [col-end]); }

函数`repeat()`可以用来定义同名网格线。 这样多个网格线拥有相同的名字。

同名网格线会被分配一个位置编号，做为其唯一标识。

![用同名网格线命名和定位项目演示1][1 11]

### 10.2 例25 ###

.item1 { grid-row: row-start 2 / row-end 3; grid-column: col-start / col-start 3; }

用同名网格线来定位项目时，应注意在网格线名称和编号之间有一个空格。

本例中，项目1的行定位开始于第2条名称是`row-start`的网格线，结束于第3条名称是`row-end`的网格线；列定位开始于第1条名称是`col-start`的网格线，结束于第3条名称是`col-start`的网格线。

![用同名网格线命名和定位项目演示2][2 8]

[演示程序][Link 22]

## 11 用网格区域命名和定位项目 ##

如同网格线命名，可以用属性`grid-template-areas`给网格区域命名。网格区域名称可以用来定位网格项目。

### 11.1 例26 ###

grid { display: grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 150px 1fr 100px; grid-template-columns: 1fr 200px; }

一组区域名称要放在单引号或双引号内，每一个名称之间以空格分隔。

每一组名称定义一行，每一个名称定义一列。

![用网格区域命名和定位项目演示1][1 12]

### 11.2 例27 ###

header { grid-row-start: header; grid-row-end: header; grid-column-start: header; grid-column-end: header; }

网格区域名称可以用在属性`grid-row-start`, `grid-row-end`, `grid-column-start`, 和 `grid-column-end`的值中，用来定位项目。

![用网格区域命名和定位项目演示2][2 9]

### 11.3 例28 ###

footer { grid-row: footer; grid-column: footer; }

网格区域名称也可以用于简写属性`grid-row` 和 `grid-column`的值中。

![用网格区域命名和定位项目演示3][3 3]

### 11.4 例29 ###

aside { grid-area: sidebar; }

网格区域名称也可以用于简写属性`grid-area`的值中。

![用网格区域命名和定位项目演示4][4 1]

[演示程序][Link 23]

## 12 隐式网格 ##

隐式网格用来在显式网格之外定位项目。有时在显示网格中没有足够的空间，或者是要在显示网格之外定位项目就要用到隐式网格。这时可以把这些项目放置在隐式网格中。

隐式网格可以通过属性 `grid-auto-rows`, `grid-auto-columns`, 和 `grid-auto-flow` 来定义。

### 12.1 例30 ###

grid { display : grid; grid-template-rows: 70px; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; }

本例中，只定一个行轨道，因此项目 1 和 2 高 70px 。

第2行轨道有隐式网格自动创建并为项目 3 和 4 分配了空间。 属性`grid-auto-rows` 定义了隐式网格的行轨道尺寸，即项目3和4的高度是 140px 。

![隐式网格演示1][1 13]

[演示程序][Link 24]

### 12.2 例31 ###

grid { display : grid; grid-auto-flow: row; }

缺省的网格布局方向是行的方向（`row`）。

![隐式网格演示2][2 10]

### 12.3 例32 ###

grid { display : grid; grid-auto-flow: column; }

网格的布局方向可以定义为列的方向（column）。

![隐式网格演示3][3 4]

### 12.4 例33 ###

grid { display : grid; grid-template-columns: 30px 60px; grid-auto-flow: column; grid-auto-columns: 1fr; }

本例中，我们只定义了两个列轨道的尺寸30px 和 60px。

隐式网格中自动创建其它列并给项目3，4，5分配空间；分配的空间尺寸是通过属性 `grid-auto-columns`定义的。

![隐式网格演示4][4 2]

[演示程序][Link 25]

## 13 隐式命名的网格区域 ##

网格线名称可以任意指定，但分配以 `-start` 和 `-end` 结尾的名字有额外的益处，这样隐式地创建了具名网格区域，该名称可以用于项目定位。

### 13.1 例34 ###

grid { display : grid; grid-template-rows: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end]; grid-template-columns: [outer-start] 1fr [inner-start] 1fr [inner-end] 1fr [outer-end]; }

本例中，行和列都有名为`inner-start` 和 `inner-end`的网格线，它们隐式地给网格区域分派了名称（`inner`）。

item1 { grid-area: inner; }

这样我们就能够直接使用网格区域名来定位，而不需要再用网格线来定位项目了。

![隐式命名的网格区域演示1][1 14]

[演示程序][Link 26]

## 14 隐式命名的网格线 ##

隐式命名网格线和隐式命名的网格区域的工作原理刚好相反。

### 14.1 例35 ###

grid { display : grid; grid-template-areas: "header header" "content sidebar" "footer footer"; grid-template-rows: 80px 1fr 40px; grid-template-columns: 1fr 200px; }

定义网格区域时隐式的命名了网格线的名称。这些网格线的名称是基于区域名加上`-start` 或 `-end`后缀组成的。

![隐式命名的网格线演示1][1 15]

### 14.2 例36 ###

item1 { grid-row-start: header-start; grid-row-end: content-start; grid-column-start: footer-start; grid-column-end: sidebar-end; }

本例中，header是通过隐式网格线名称进行定位的。

![隐式命名的网格线演示2][2 11]

[演示程序][Link 27]

## 15 层叠网格项目 ##

通过项目定位可以使多个项目层叠在一起，属性`z-index`可以改变层叠项目的层次。

### 15.1 例37 ###

.item-1, .item-2 { grid-row-start: 1; grid-column-end: span 2; } .item-1 { grid-column-start: 1; z-index: 1; } .item-2 { grid-column-start: 2 }

本例中，项目1 和 2 行定位开始于第1条行网格线，并跨越两列。

两个项目都是用网格线编号进行定位。项目1起始于第1条列网格线，项目2起始于第2条列网格线，这使得两个项目在第一行中间列发生层叠。

缺省情况下，项目2将层叠于项目1之上；然而，给项目1设置属性`z-index: 1`就使得项目1层叠于项目2之上。

![层叠网格项目演示1][1 16]

[演示程序][Link 28]

### 15.2 例38 ###

.overlay { grid-row-start: header-start; grid-row-end: content-end; grid-column-start: content-start; grid-column-end: sidebar-start; z-index: 1; }

本例中，利用在 `grid-template-areas` 定义中的隐式网格线名称，定位了一个网格项目（`overlay`），并将层叠于上层。

![层叠网格项目演示2][2 12]

[演示程序][Link 29]

## 16 网格项目的对齐方式 ##

CSS的 [盒模型对齐模块][Link 30] 补充了CSS网格的内容，网格项目可以按行或列的轴线方向实现多种对齐方式。

属性`justify-items` 和 `justify-self` 以行轴为参照对齐项目，属性`align-items` 和 `align-self` 以列轴为参照对齐项目。

属性`justify-items` 和 `align-items` 是网格容器的属性，并支持如下这些值：

*  auto
 *  normal
 *  start
 *  end
 *  center
 *  stretch
 *  baseline
 *  first baseline
 *  last baseline

### 16.1 例39 ###

.grid { grid-template-rows: 80px 80px; grid-template-columns: 1fr 1fr; grid-template-areas: "content content" "content content"; } .item { grid-area: content } .grid { justify-items: start }

在行的轴线起点处对齐。

![网格项目的对齐方式演示1][1 17]

[演示程序][Link 31]

### 16.2 例40 ###

grid { justify-items: center; }

在行的轴线中点处对齐。

![网格项目的对齐方式演示2][2 13]

[演示程序][Link 32]

### 16.3 例41 ###

grid { justify-items: end; }

在行的轴线终点处对齐。

![网格项目的对齐方式演示3][3 5]

[演示程序][Link 33]

### 16.4 例42 ###

grid { justify-items: stretch; }

在行的轴线方向延伸并填满整个区域。`stretch`是缺省值。

![网格项目的对齐方式演示4][4 3]

[演示程序][Link 34]

### 16.5 例43 ###

grid { align-items: start; }

在列的轴线起点处对齐。

![网格项目的对齐方式演示5][5]

[演示程序][Link 35]

### 16.6 例44 ###

grid { align-items: center; }

在列的轴线中点处对齐。

![网格项目的对齐方式演示6][6]

[演示程序][Link 36]

### 16.7 例45 ###

grid { align-items: end; }

在列的轴线终点处对齐。

![网格项目的对齐方式演示7][7]

[演示程序][Link 37]

### 16.8 例46 ###

grid { align-items: stretch; }

在列的轴线方向延伸并填满整个区域。

![网格项目的对齐方式演示8][8]

[演示程序][Link 38]

### 16.9 例47 ###

grid { justify-items: center; align-items: center; }

项目定位于行轴和列轴线的中间位置。

![网格项目的对齐方式演示9][9]

[演示程序][Link 39]

## 17 网格项目的对齐方式2 ##

项目可以用属性align-self 和 justify-self定义自己的对齐方式，并支持如下这些属性值：

*  auto
 *  normal
 *  start
 *  end
 *  center
 *  stretch
 *  baseline
 *  first baseline
 *  last baseline

### 17.1 例48 ###

.item1 { justify-self: start } .item2 { justify-self: center } .item3 { justify-self: end }

属性`justify-self` 在行的轴线方向定义对齐方式。

![网格项目的对齐方式演示10][10]

[演示程序][Link 40]

### 17.2 例49 ###

.item1 { align-self: start } .item2 { align-self: center } .item3 { align-self: end }

属性`align-self` 在列的轴线方向定义对齐方式。

![网格项目的对齐方式演示11][11]

[演示程序][Link 41]

### 17.3 例50 ###

.item1 { justify-self: center align-self: center }

项目1定位在行的轴线和列的轴线的中间位置。

![网格项目的对齐方式演示12][12]

[演示程序][Link 42]

## 18 网格轨道的对齐方式 ##

在网格容器中，网格轨道延轴线方向有多种对齐方式。

属性`align-content`用于定义网格轨道延着行的轴线的对齐方式，而属性`justify-content`用于定义网格轨道沿着列的轴线的对齐方式。并分别支持如下属性：

*  normal
 *  start
 *  end
 *  center
 *  stretch
 *  space-around
 *  space-between
 *  space-evenly
 *  baseline
 *  first baseline
 *  last baseline

### 18.1 例51 ###

.grid { width: 100%; height: 300px; grid-template-columns: repeat(4, 45px); grid-template-rows: repeat(4, 45px); grid-gap: 0.5em; justify-content: start; }

列的轨道在行的轴线起点处对齐。`start` 是缺省值。

![网格轨道的对齐方式演示1][1 18]

[演示程序][Link 43]

### 18.2 例52 ###

.grid { justify-content: end; }

列的轨道在行的轴线终点处对齐。

![网格轨道的对齐方式演示2][2 14]

[演示程序][Link 44]

### 18.3 例53 ###

.grid { justify-content: center; }

列的轨道在行的轴线中间处对齐。

![网格轨道的对齐方式演示3][3 6]

[演示程序][Link 45]

### 18.4 例54 ###

.grid { justify-content: space-around; }

在每一列的两侧平均分配额外空间。

![网格轨道的对齐方式演示4][4 4]

[演示程序][Link 46]

### 18.5 例55 ###

.grid { justify-content: space-between; }

在列与列之间平均分配额外的空间。

![网格轨道的对齐方式演示5][5 1]

[演示程序][Link 47]

### 18.6 例56 ###

.grid { justify-content: space-evenly; }

在列与列之间及列与边界之间平均分配额外空间。

![网格轨道的对齐方式演示6][6 1]

[演示程序][Link 48]

### 18.7 例57 ###

.grid { align-content: start; }

行的轨道在列的轴线起点处对齐，属性`start`是缺省值。

![网格轨道的对齐方式演示7][7 1]

[演示程序][Link 49]

### 18.8 例58 ###

.grid { align-content: end; }

行的轨道在列的轴线终点处对齐。

![网格轨道的对齐方式演示8][8 1]

[演示程序][Link 50]

### 18.9 例59 ###

.grid { align-content: center; }

行的轨道在列的轴线中点处对齐。

![网格轨道的对齐方式演示9][9 1]

[演示程序][Link 51]

### 18.10 例60 ###

.grid { align-content: space-around; }

每一行的两侧平均分配额外空间。

![网格轨道的对齐方式演示10][10 1]

[演示程序][Link 52]

### 18.11 例61 ###

.grid { align-content: space-between; }

在行与行之间平均分配额外空间。

![网格轨道的对齐方式演示11][11 1]

[演示程序][Link 53]

### 18.12 例62 ###

.grid { align-content: space-evenly; }

在行与行之间及行与边界之间平均分配额外空间。

![网格轨道的对齐方式演示12][12 1]

[演示程序][Link 54]

## 结语 ##

本教程相对全面地介绍了网格的相关内容，但这并不是一个完整的技术文档。想更全面的学习相关内容，推荐访问 [Mozilla开发者网络][Mozilla] 和 [W3C][] 的网格文档。

由于能力有限，翻译中难免错误较多，还请大家多多谅解！

[CSS]: http://topic.42du.cn/grid
[1]: http://res.42du.cn/up/grid/container-1.jpg
[Link 1]: http://www.42du.cn/run/122
[2]: http://res.42du.cn/up/grid/container-2.jpg
[Link 2]: http://www.42du.cn/run/123
[1 1]: http://res.42du.cn/up/grid/explicit-1.jpg
[Link 3]: http://www.42du.cn/run/124
[2 1]: http://res.42du.cn/up/grid/explicit-2.jpg
[Link 4]: http://www.42du.cn/run/125
[3]: http://res.42du.cn/up/grid/explicit-3.jpg
[Link 5]: http://www.42du.cn/run/126
[4]: http://res.42du.cn/up/grid/explicit-4.jpg
[Link 6]: http://www.42du.cn/run/127
[1 2]: http://res.42du.cn/up/grid/mimmax-1.jpg
[Link 7]: http://www.42du.cn/run/128
[1 3]: http://res.42du.cn/up/grid/repeat-1.jpg
[Link 8]: http://www.42du.cn/run/129
[2 2]: http://res.42du.cn/up/grid/repeat-2.jpg
[Link 9]: http://www.42du.cn/run/130
[1 4]: http://res.42du.cn/up/grid/gap-1.jpg
[Link 10]: http://www.42du.cn/run/131
[2 3]: http://res.42du.cn/up/grid/gap-2.jpg
[Link 11]: http://www.42du.cn/run/132
[3 1]: http://res.42du.cn/up/grid/gap-3.jpg
[Link 12]: http://www.42du.cn/run/133
[1 5]: http://res.42du.cn/up/grid/line-number-1.jpg
[Link 13]: http://www.42du.cn/run/134
[2 4]: http://res.42du.cn/up/grid/line-number-2.jpg
[Link 14]: http://www.42du.cn/run/135
[3 2]: http://res.42du.cn/up/grid/line-number-3.jpg
[Link 15]: http://www.42du.cn/run/136
[1 6]: http://res.42du.cn/up/grid/span-1.jpg
[Link 16]: http://www.42du.cn/run/137
[2 5]: http://res.42du.cn/up/grid/span-2.jpg
[Link 17]: http://www.42du.cn/run/138
[1 7]: http://res.42du.cn/up/grid/span-3.jpg
[Link 18]: http://www.42du.cn/run/139
[1 8]: http://res.42du.cn/up/grid/span-4.jpg
[Link 19]: http://www.42du.cn/run/140
[1 9]: http://res.42du.cn/up/grid/line-name-1.jpg
[2 6]: http://res.42du.cn/up/grid/line-name-2.jpg
[1 10]: http://res.42du.cn/up/grid/p-by-name-1.jpg
[Link 20]: http://www.42du.cn/run/141
[2 7]: http://res.42du.cn/up/grid/p-by-name-2.jpg
[Link 21]: http://www.42du.cn/run/142
[1 11]: http://res.42du.cn/up/grid/p-same-name-1.jpg
[2 8]: http://res.42du.cn/up/grid/p-same-name-2.jpg
[Link 22]: http://www.42du.cn/run/143
[1 12]: http://res.42du.cn/up/grid/area-1.jpg
[2 9]: http://res.42du.cn/up/grid/area-2.jpg
[3 3]: http://res.42du.cn/up/grid/area-3.jpg
[4 1]: http://res.42du.cn/up/grid/area-4.jpg
[Link 23]: http://www.42du.cn/run/144
[1 13]: http://res.42du.cn/up/grid/implicit-1.jpg
[Link 24]: http://www.42du.cn/run/145
[2 10]: http://res.42du.cn/up/grid/implicit-2.jpg
[3 4]: http://res.42du.cn/up/grid/implicit-3.jpg
[4 2]: http://res.42du.cn/up/grid/implicit-4.jpg
[Link 25]: http://www.42du.cn/run/146
[1 14]: http://res.42du.cn/up/grid/implicit-area-1.jpg
[Link 26]: http://www.42du.cn/run/147
[1 15]: http://res.42du.cn/up/grid/implicit-line-1.jpg
[2 11]: http://res.42du.cn/up/grid/implicit-line-2.jpg
[Link 27]: http://www.42du.cn/run/148
[1 16]: http://res.42du.cn/up/grid/layer-1.jpg
[Link 28]: http://www.42du.cn/run/149
[2 12]: http://res.42du.cn/up/grid/layer-2.jpg
[Link 29]: http://www.42du.cn/run/150
[Link 30]: https://drafts.csswg.org/css-align/
[1 17]: http://res.42du.cn/up/grid/align-i-1.jpg
[Link 31]: http://www.42du.cn/run/151
[2 13]: http://res.42du.cn/up/grid/align-i-2.jpg
[Link 32]: http://www.42du.cn/run/152
[3 5]: http://res.42du.cn/up/grid/align-i-3.jpg
[Link 33]: http://www.42du.cn/run/153
[4 3]: http://res.42du.cn/up/grid/align-i-4.jpg
[Link 34]: http://www.42du.cn/run/154
[5]: http://res.42du.cn/up/grid/align-i-5.jpg
[Link 35]: http://www.42du.cn/run/155
[6]: http://res.42du.cn/up/grid/align-i-6.jpg
[Link 36]: http://www.42du.cn/run/156
[7]: http://res.42du.cn/up/grid/align-i-7.jpg
[Link 37]: http://www.42du.cn/run/157
[8]: http://res.42du.cn/up/grid/align-i-8.jpg
[Link 38]: http://www.42du.cn/run/158
[9]: http://res.42du.cn/up/grid/align-i-9.jpg
[Link 39]: http://www.42du.cn/run/159
[10]: http://res.42du.cn/up/grid/align-i-10.jpg
[Link 40]: http://www.42du.cn/run/160
[11]: http://res.42du.cn/up/grid/align-i-11.jpg
[Link 41]: http://www.42du.cn/run/161
[12]: http://res.42du.cn/up/grid/align-i-12.jpg
[Link 42]: http://www.42du.cn/run/162
[1 18]: http://res.42du.cn/up/grid/align-t-1.jpg
[Link 43]: http://www.42du.cn/run/163
[2 14]: http://res.42du.cn/up/grid/align-t-2.jpg
[Link 44]: http://www.42du.cn/run/164
[3 6]: http://res.42du.cn/up/grid/align-t-3.jpg
[Link 45]: http://www.42du.cn/run/165
[4 4]: http://res.42du.cn/up/grid/align-t-4.jpg
[Link 46]: http://www.42du.cn/run/166
[5 1]: http://res.42du.cn/up/grid/align-t-5.jpg
[Link 47]: http://www.42du.cn/run/167
[6 1]: http://res.42du.cn/up/grid/align-t-6.jpg
[Link 48]: http://www.42du.cn/run/168
[7 1]: http://res.42du.cn/up/grid/align-t-7.jpg
[Link 49]: http://www.42du.cn/run/169
[8 1]: http://res.42du.cn/up/grid/align-t-8.jpg
[Link 50]: http://www.42du.cn/run/170
[9 1]: http://res.42du.cn/up/grid/align-t-9.jpg
[Link 51]: http://www.42du.cn/run/171
[10 1]: http://res.42du.cn/up/grid/align-t-10.jpg
[Link 52]: http://www.42du.cn/run/172
[11 1]: http://res.42du.cn/up/grid/align-t-11.jpg
[Link 53]: http://www.42du.cn/run/173
[12 1]: http://res.42du.cn/up/grid/align-t-12.jpg
[Link 54]: http://www.42du.cn/run/174
[Mozilla]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
[W3C]: https://www.w3.org/TR/css3-grid-layout/