Grid 布局是 CSS 中最强大的布局系统。与 flex 的一维布局系统不同，CSS Grid 布局是一个二维布局系统，也就意味着它可以同时处理列和行。
网格容器(Grid Container) 属性
- display
- grid-template-columns
- grid-template-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- grid-gap
- justify-items
- align-items
- place-items
- justify-content
- align-content
- place-content
- grid-auto-columns
- grid-auto-rows
网格项(Grid Items) 属性
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- grid-column
- grid-row
- grid-area
- justify-self
- align-self
- place-self
display
将元素定义为网格容器，并为其内容建立新的 网格格式上下文。
grid ：生成一个块级网格
inline-grid ：生成一个内联网格
.container {
display: grid | inline-grid;
}
grid-template-columns / grid-template-rows
使用空格分隔的值列表，用来定义网格的列和行。这些值表示 网格轨道(Grid Track) 大小，它们之间的空格表示网格线。
值：
– <track-size>： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称
.container {
grid-template-columns: <track-size> ... | <line-name> <track-size> ...;
grid-template-rows: <track-size> ... | <line-name> <track-size> ...;
}
当你在 网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
但是你可以明确的指定网格线(Grid Line)名称，例如 <line-name> 值。请注意网格线名称的括号语法：
.container {
grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}
请注意，一条网格线(Grid Line)可以有多个名称。例如，这里的第二条 行网格线(row grid lines) 将有两个名字：row1-end 和 row2-start ：
.container {
grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}
如果你的定义包含多个重复值，则可以使用 repeat() 表示法来简化定义：
.container {
grid-template-columns: repeat(3, 20px [col-start]);
}
.container {
grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}
fr 单元允许你用等分网格容器剩余可用空间来设置 网格轨道(Grid Track) 的大小 。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：
.container {
grid-template-columns: 1fr 1fr 1fr;
}
剩余可用空间是除去所有非灵活网格项 之后 计算得到的。在这个例子中，可用空间总量减去 50px 后，再给 fr 单元的值 3 等分：
.container {
grid-template-columns: 1fr 50px 1fr 1fr;
}
grid-template-areas
通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。
值：
-
<grid-area-name>：由网格项的grid-area指定的网格区域名称 -
.（点号） ：代表一个空的网格单元 -
none：不定义网格区域
.container {
grid-template-areas:
"<grid-area-name> | . | none | ..."
"...";
}
.item-a {
grid-area: header;
}
.item-b {
grid-area: main;
}
.item-c {
grid-area: sidebar;
}
.item-d {
grid-area: footer;
}
.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";
}
上面的代码将创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域，一个是空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成。
你的声明中的每一行都需要有相同数量的单元格。
你可以使用任意数量的相邻的 点. 来声明单个空单元格。 只要这些点.之间没有空隙隔开，他们就代表一个单独的单元格。
注意你 不能 用这个语法来命名网格线，只是命名 网格区域 。当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线 和 起始列网格线 的名称将为 foo-start，而最后一条行网格线 和 最后一条列网格线 的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start
grid-template
用于定义 [grid-template-rows]，[grid-template-columns]，[grid-template-areas]简写属性。
值：
-
none：将所有三个属性设置为其初始值 -
<grid-template-rows> / <grid-template-columns>：将 [grid-template-columns]和 [grid-template-rows] 设置为相应地特定的值，并且设置[grid-template-areas]
.container {
grid-template:
[row1-start] "header header header" 25px [row1-end]
[row2-start] "footer footer footer" 25px [row2-end]
/ auto 50px auto;
}
.container {
grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
grid-template-columns: auto 50px auto;
grid-template-areas:
"header header header"
"footer footer footer";
}
grid-column-gap / grid-row-gap
指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。
值：
<line-size> ：长度值
.container {
grid-template-columns: 100px 50px 100px;
grid-template-rows: 80px auto 80px;
grid-column-gap: 10px;
grid-row-gap: 15px;
}
只能在 列/行 之间创建间距，网格外部边缘不会有这个间距。
grid-gap
grid-column-gap和 grid-row-gap 的简写语法
值：
-
<grid-row-gap> <grid-column-gap>：长度值
.container {
grid-gap: <grid-row-gap> <grid-column-gap>;
}
如果grid-row-gap没有定义，那么就会被设置为等同于 grid-column-gap 的值。例如下面的代码是等价的：
.container{
/* 设置 grid-column-gap 和 grid-row-gap */
grid-column-gap: 10px;
grid-row-gap: 10px;
/* 等价于 */
grid-gap: 10px 10px;
/* 等价于 */
grid-gap: 10px;
}
justify-items
沿着 inline（行）轴线对齐网格项(grid items)（相反的属性是 align-items 沿着 block（列）轴线对齐）。此值适用于容器内的所有网格项。
- start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
- end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
- center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
- stretch：填满单元格的宽度（默认值）
align-items
沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-items沿着 inline（行）轴线对齐）。此值适用于容器内的所有网格项。
- start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
- end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
- center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
- stretch：填满单元格的高度（默认值）
place-items
place-items 是设置 align-items 和 justify-items 的简写形式。
<align-items> <justify-items>：第一个值设置 align-items 属性，第二个值设置 justify-items 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
justify-content
有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 inline（行）轴线对齐网格（相反的属性是 align-content ，沿着 block（列）轴线对齐网格）。
值：
-
start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐） -
end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐） -
center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐） -
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度 -
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间 -
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间 -
space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间
align-content
有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 block（列）轴线对齐网格（相反的属性是 justify-content，沿着 inline（行）轴线对齐网格）。
值：
-
start：将网格对齐到 网格容器(grid container) 的顶部起始边缘（顶部对齐） -
end：将网格对齐到 网格容器 的底部结束边缘（底部对齐） -
center：将网格对齐到 网格容器 的垂直中间位置（垂直居中对齐） -
stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度 -
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间 -
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间 -
space-evenly：在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间
place-content
place-content 是设置 align-content 和 justify-content 的简写形式。
<align-content> <justify-content>：第一个值设置 align-content 属性，第二个值设置 justify-content 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
grid-auto-columns / grid-auto-rows
指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。（参见显式网格和隐式网格之间的区别)
值：
<track-size>：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）
.container {
grid-template-columns: 60px 60px;
grid-template-rows: 90px 90px
}
.item-a {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
.item-b {
grid-column: 5 / 6;
grid-row: 2 / 3;
}
我们告诉 .item-b 从第 5 条列网格线开始到第 6 条列网格线结束，但我们从来没有定义过 第5 或 第6 列网格线。
因为我们引用的网格线不存在，所以创建宽度为 0 的隐式网格轨道以填补空缺。我们可以使用 grid-auto-columns 和 grid-auto-rows 来指定这些隐式轨道的大小：
子元素 网格项(Grid Items) 属性
注意：float，display: inline-block，display: table-cell，vertical-align 和 column-* 属性对网格项无效。
grid-column-start / grid-column-end / grid-row-start / grid-row-end
通过引用特定网格线(grid lines) 来确定 网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start是网格项开始的网格线，grid-column-end/ grid-row-end 是网格项结束的网格线。
值：
-
<line>：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线 -
span <number>：该网格项将跨越所提供的网格轨道数量 -
span <name>：该网格项将跨越到它与提供的名称位置 -
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度
grid-column / grid-row
分别为 grid-column-start + grid-column-end 和 grid-row-start) + grid-row-end 的简写形式。
-
<start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度
grid-area
为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas 属性创建的模板进行引用。 另外，这个属性可以用作grid-row-start+ grid-column-start + grid-row-end+ grid-column-end 的简写。
值：
- <name>：你所选的名称
- <row-start> / <column-start> / <row-end> / <column-end>：数字或分隔线名称
justify-self
沿着 inline（行）轴线对齐网格项（ 相反的属性是 align-self，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。
值：
-
start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐） -
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐） -
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐） -
stretch：填满单元格的宽度（默认值）
align-self
沿着 block（列）轴线对齐网格项(grid items)（ 相反的属性是 justify-self，沿着 inline（行）轴线对齐）。此值适用于单个网格项内的内容。
值：
-
start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐） -
end：将网格项对齐到其单元格的底部结束边缘（底部对齐） -
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐） -
stretch：填满单元格的高度（默认值）
place-self
place-self 是设置 align-self 和 justify-self 的简写形式。
值：
auto – 布局模式的 “默认” 对齐方式。
<align-self> <justify-self>：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
