CSS 网格布局(Grid Layout) 是CSS中最强大的布局系统。这是一个二维系统，这意味着它可以同时处理列和行，不像 flexbox那样主要是一维系统。你可以通过将CSS规则应用于父元素（成为网格容器）和该元素的子元素（网格元素），来使用网格布局。

需要注意的是，设为 grid 布局以后，子元素的float、clear和vertical-align属性将失效。

<div class="container">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
</div>

网格线(Grid Line)
分界线构成了网格的结构。

网格轨道(Grid Track)
两个相邻网格线之间的空间。你可以把它们想像成网格的行或列。

网格单元格(Grid Cell)
两个相邻的行和两个相邻的列之间的网格线空间。它是网格的一个"单位"。

网格区域(Grid Area)
四条网格线所包围的所有空间。网格区域可由任意数量的网格单元格组成。

网格容器(Grid Container)

.container{
    display: grid | inline-grid;

    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;

    grid-column-gap: 10px;
    grid-row-gap: 15px;

    /* grid-gap: 10px 15px; */

    justify-items: start | end | center | stretch;
    align-items: start | end | center | stretch;

    justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
    align-content: start | end | center | stretch | space-around | space-between | space-evenly;

    grid-template-areas: none;

    grid-auto-columns: 60px;
    grid-auto-rows: 60px;

    grid-auto-flow: row;
}

1. grid-template-columns( grid-template-rows)

属性值:

可以是一个长度、百分比或者是网格中自由空间的一小部分(使用fr单位)

.container{
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

此时，利用以空格分隔的值定义网格的列和行。值的大小代表轨道的大小，并且它们之间的空格表示网格线。

fr 单位

将一个轨道大小设置为网格容器内自由空间的一小部分。

.container{
    grid-template-columns: 1fr 50px 1fr 1fr;
}

空间减去50px后三等分。

任意名称

.container{
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100% [third-line] auto [last-line];
}

此时，利用[]中名字定义网格线，中间值的大小代表轨道的大小。而且一条网格线可以具有有多个名称，中间用空格隔开（e.g : [row1-end row2-start] ）。

subgrid

网格容器本身就是一个网格项(即嵌套网格)，此属性指定行和列的大小继承于父元素而不是自身指定。

2. grid-column-gap（grid-row-gap）

指定网格线的大小。你可以把它想像成在行/列之间设置间距宽度。单位为长度值。

.container{
    grid-column-gap: 10px;
    grid-row-gap: 15px;
}

3. grid-gap

grid-column-gap 和 grid-row-gap的简写值。

grid-gap: <grid-column-gap> <grid-row-gap>;

如果没有指定grid-row-gap属性的值，默认与grid-column-gap属性值相同

4. justify-items（align-items）

容器内所有的网格项中的内容的对齐方式。

justify-items

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容处于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间

align-items

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容处于网格区域的中间位置
stretch: 内容高度占据整个网格区域空间

5. justify-content（align-content）

当网格有具体大小，填充不满容器时，设置网格容器内网格的对齐方式。（网格项组合成一个整体）

justify-content

start: 网格与网格容器的左端对齐
end: 网格与网格容器的右端对齐
center: 网格处于网格容器的中间
stretch: 调整网格项的大小，使其宽度填充整个网格容器
space-around: 网格列之间设置两侧的间隔都相等，其边缘间隙大小为中间空格间隙大小的一半。
space-between: 网格列两端对齐，中间间隔相等。
space-evenly: 网格列中间间隔相等，两端也有间隙。

align-content

start: 网格与网格容器的左端对齐
end: 网格与网格容器的右端对齐
center: 网格处于网格容器的中间
stretch: 调整网格项的大小，使其宽度填充整个网格容器
space-around: 网格行之间设置两侧的间隔都相等，其边缘间隙大小为中间空格间隙大小的一半。
space-between: 网格行两端对齐，中间间隔相等。
space-evenly: 网格行中间间隔相等，两端也有间隙。

6. grid-template-areas

使用grid-area属性定义网格区域名称，从而定义网格模板。网格区域重复的名称就会导致内容跨越这些单元格。句点表示一个空单元格。语法本身提供了一种可视化的网格结构。

属性值:

<grid-area-name>: 使用grid-area属性定义网格区域名称

.: 句点表示一个空单元格
none: 无网格区域被定义

.container{
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas: "header header header header"
                         "main main . sidebar"
                         "footer footer footer footer"
}

这将创建一个四列三行的网格。最上面的一行为header区域。中间一行由两个main区域，一个空单元格和一个sidebar区域。最后一行是footer区域。

你只是使用此语法进行网格区域命名，而不是网格线命名。当你使用此语法时，区域两边的线就会得到自动命名。如果网格区域名称为foo,则其行线和列线的名称就将为foo-start，最后一行线及其最后一列线的名字就会为foo-end。这意味着一些线就可能具有多个名称，如上面示例中所示，拥有三个名称: header-start, main-start, 以及footer-start。

7. grid-auto-columns和grid-auto-rows

指定任何自动生成的网格轨道(隐式网格跟踪)的大小。

假如，定义的网格为4行4列，需要将一个第五行第五列的网格项，此时，此属性定义这个自动生成的网格轨道的大小。
单位同grid-template-columns

8. grid-auto-flow

当不主动设置子元素的位置时，填充方案。

.container{
    grid-auto-flow: row | column | row dense | column dense
}

row: 优先填充每一行，必要时添加新行
column: 优先填充每一列，必要时添加新列
dense: 优先填补网格中之前较小的网格项留有的空白

网格项(Grid Item)

网格容器的孩子(子元素)。这里.item元素都是网格项。

.item{
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 2;
    grid-row-end: span 2;

    /* grid-column: 3 / span 2;
    grid-row: third-line / 4; */

    grid-area: header;

    justify-self: stretch;
    align-self: stretch;
}

1. grid-column-start/grid-column-end/grid-row-start/grid-row-end

使用特定的网格线确定网格项在网格内的位置。
grid-column-start/grid-row-start 属性表示网格项的网格线的起始位置，
grid-column-end/grid-row-end属性表示网格项的网格线的终止位置。

属性值:

可以是一个数字来引用相应编号的网格线，或者使用名称引用相应命名的网格线

.item-a{
    grid-column-start: 2;
    grid-column-end: five;
    grid-row-start: row1-start
    grid-row-end: 3;
}

如果没有声明grid-column-end/grid-row-end属性，默认情况下网格项的跨度为1。
网格项可以互相重叠。可以使用z-index属性控制堆叠顺序。

网格项包含指定数量的网格轨道(span <number>/span <name>)

.item-a{
    grid-column-start: 1;
    grid-column-end: span col4-start;
    grid-row-start: 2;
    grid-row-end: span 2;
}

auto

表明自动定位，自动跨度或者默认跨度之一

2. grid-column/grid-row

grid-column-start + grid-column-end, 和 grid-row-start + grid-row-end属性分别的简写形式。

grid-column:<start-line> / <end-line>。
属性值同上。

3. grid-area

给网格项进行命名以便于模板使用grid-template-areas属性创建时可以加以引用。

.item-d{
    grid-area: header
}

.item{
grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

3. justify-self（align-self）

单一网格项中的内容对齐方式。

justify-self

start: 内容与网格区域的左端对齐
end: 内容与网格区域的右端对齐
center: 内容处于网格区域的中间位置
stretch: 内容宽度占据整个网格区域空间(默认值)

align-self

start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容处于网格区域的中间位置
stretch: 内容高度占据整个网格区域空间(默认值)

grid网格布局