Grid 是一个基于二维网格布局的系统，有了它我们可以非常方便的实现过去很复杂布局，无需再使用, , 这些本质上是 hack 的方法。

CSS网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系（前提是HTML生成了这些区域）。

它像表格一样，网格布局让我们能够按行或列来对齐元素。 然而在布局上，网格比表格更可能做到或更简单。

在学习之前需要了解以下网格的几个概念。

网格轨道（Grid Tracks）

网格轨道 是两条网格线之间的空间。它们通过使用属性和在网格中定义。

上图中有两行三列，一行或一列就叫做轨道。

网格线（Grid Lines）

使用布局在显式网格中定义轨道的同时会创建网格线。

网格线可以用它们的编号来寻址。在从左到右的语言中，将位于网格的左侧，将位于其顶部。线编号遵循文档的写入模式，因此在从右到左的语言中，行将位于网格的右侧。下面的图片展示了该网格的线编号，假设语言是从左到右的。

网络单元格（Grid Cell）

在布局中，网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，非常像表格单元格。

网格区域（Grid Areas）

网格区域是网格中由一个或者多个网格单元格组成的一个矩形区域。本质上，网格区域一定是矩形的。例如，不可能创建T形或L形的网格区域。

网格间距（Gutters）

网格间距是网格轨道之间的间距，可以通过，在Grid布局中创建。

和 flex 类似，要使用网格布局，首先要有一个容器，将一个元素的设置为就可以得到一个 grid 容器。容器的子项就是网格项（grid items），它有点类似中的，但是更加灵活。

, , 和 元素对网格容器不起作用。

网格模板

创建了网格容器，我们就可以定义这个网格有多少行有多少列，并且每一行每一列的大小。

grid-template-rows

我们使用来显性定义网格有多少行。它可以取如下的值：

grid-template-columns

它和类似，一个设置网格行，一个是设置网格列。

Grid 中可以使用的函数

在 Grid 布局中我们还可以使用如下 3 个函数

repeat()

函数可以以一种更简洁的方式去表示大量而且重复行的表达式。

比如上面我们可以写成。它的第一个参数是重复的次数，而可以为和。

如果容器有明确的大小或最大大小，则重复次数是最大可能的正整数，不会导致网格溢出其网格容器。如果任何重复次数都会溢出，则重复次数为1。

与的行为相同，只是在放置网格项后，任何空的重复轨道都会折叠。

minmax()

定义了一个长宽范围的闭区间。它接受两个参数，最小值 和 最大值。它返回这个区间中的值。

如 ，最大不能大于

最小不能小于

fit-content()

它相当于。参数可以是长度值和百分比。

它在内容的最小值和参数中去一个最大值，然后再在内容的最大值中取一个最小值。

也就是当内容少时，它取内容的长度，如果内容多，内容长度大于参数长度时，它取参数长度。

grid-template-areas

这个属性网格区块，需要和配合使用，它的值可以是和。

为字符串时每一个给定的字符串会生成一行，一个字符串中用空格分隔的每一个单元(cell)会生成一列。多个同名的，跨越相邻行或列的单元称为网格区块(grid area)。非矩形的网格区块是无效的。

字符串，关联 grid item 的，用它定义一片区域。

grid-template

是、和的简写。

它的值可以分三种情况：

grid-row-gap / row-gap

用来设置行元素之间的间隙(gutter) 大小。它的值可以是长度值、百分比和。

CSS Grid Layout 起初是用 grid-row-gap 属性来定义的，目前逐渐被 row-gap 替代。但是，为了兼容那些不支持 row-gap 属性的浏览器，你需要使用带有前缀的属性。

grid-column-gap / column-gap

用来设置元素列之间的间隔 (gutter) 大小。它的值可以是长度值、百分比和。

在 多列布局 时默认间隔为1em，其他类型布局默认间隔为 0。

和一样，它渐渐被取代。

grid-gap / gap

是上面两个属性的简写，语法是。如果没有那么它将被设置成跟一样的的值。

它也渐渐被取代。

隐式创建的行和列

css gird 会根据周围项目的大小和跨度自动调整网格上每个项目的位置。

比如：

我们只定义了一行，两列。但是我们却有 5 个子元素。CSS网格决定将它们扩展到隐式创建的空间，新建的隐式行中的列自动从先前指定的属性继承行高。

, , 和 这 4 个属性是 grid item 上的，它可以定义一个 grid item 的位置，如果我们将它的位置设置的超出我们定义的网格，那时也会隐式创建行或列。

grid-auto-rows

指定了隐式创建行的大小。它的值可以是：

它的值和是一样的。

grid-auto-columns

指定了隐式创建的网格的列宽。它的取值和一样。

grid-auto-flow

控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

如果我们在一个中写几个，再对父级设置，从视觉的角度可以发现没什么变化。但是如果我们再将父级加上一句我们就发现现在子元素在一行显示，和弹性盒子效果差不多。

的值如下：

在这两个关键字后面还可以加上关键字。语法是。

该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。这样做会填上稍大元素留下的空白，但同时也可能导致原来出现的次序被打乱。

如果省略它，使用一种「稀疏」算法，在网格中布局元素时，布局算法只会「向前」移动，永远不会倒回去填补空白。这保证了所有自动布局元素「按照次序」出现，即使可能会留下被后面元素填充的空白。

grid

是 CSS 简写属性，它几乎包括上面提到的所有属性（除了）。

与其他简写属性同样，若有次级属性未被声明，其将使用初始值。另外，尽管此简写声明无法设置网格的槽（gutter），槽会被该声明重置。

它的值可以分为 3 类

就和简写一样，如

设置行高（被设置为）， 后面的必须要写（被设置为 ），最后置明确该如何自动重复列轨道（属性设为）。 如

这种写法和上种写法相反，这种是设置（属性为）。可选的设置属性（为） 如

grid-row-start, grid-row-end, grid-column-start, grid-column-end

分别指定 grid item 在网格中的行起始位，行结束位，列起始位，列结束位。

这就需要了解之前介绍的网格线概念，横线（row）从上到下递增，竖线（column）从做到右递增，都是从 1 开始算。

它们可以取如下值：

它和有点相似

如果设置的位置超出指定大小，会得到不稳定的效果，应该避免这种情况。

grid-row, grid-column

和分别是上面 4 个属性简写。

它们值的语法是。如果只有一个值那么它是，值为默认。

当列数未知时，可以使用让它一直扩展到网格末尾。

使用负值

grid-area

上面我们已经展示了和结合的用法。其实是、、和 的简写。

它的默认值是

如果设置了 4 个值的话那么它的顺序是

如果设置了 3 个值，那么最后一个为

如果设置了 2 个值，那么后两个为

如果设置了 1 个值，那么后三个为

如果第一项是，那么被忽略的都为自定义表示

我们可以使用和调整 grid item 的内容对齐方式。

用来垂直方向对齐，用来水平方向对齐。

align-self

flex 布局也可以使用这个属性。它常用如下 3 个值：

justify-self

它常用如下 3 个值：