Grid布局

CSS Grid(网格) 布局（又称为 “Grid(网格)” ），是一个二维的基于网格的布局系统它的目标是完全改变我们基于网格的用户界面的布局方式。CSS 一直用来布局我们的网页，但一直以来都存在这样或那样的问题。一开始我们用表格（table），然后是浮动（float），再是定位（postion）和内嵌块（inline-block），但是所有这些方法本质上都是只是 hack 而已，并且遗漏了很多重要的功能（例如垂直居中）。Flexbox 的出现很大程度上改善了我们的布局方式，但它的目的是为了解决更简单的一维布局，而不是复杂的二维布局（实际上 Flexbox 和 Grid 能结合在一起工作，而且配合得非常好）。Grid(网格) 布局是第一个专门为解决布局问题而创建的 CSS 模块.

父元素 网格容器(Grid Container) 属性

display

• grid ：生成一个块级网格
• inline-grid ：生成一个内联网格
• subgrid ：如果你的网格容器本身是另一个网格的网格项（即嵌套网格），你可以使用这个属性来表示
  你希望它的行/列的大小继承自它的父级网格容器，而不是自己指定的。

grid-template-columns / grid-template-rows

用来定义网格的列和行。这些值表示 网格大小。

• ： 可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
• ：你可以选择的任意名称

grid-template-areas

通过引用 grid-area 属性指定的 网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空的网格单元。这个语法本身可视作网格的可视化结构。

• ：由网格项的 grid-area 指定的网格区域名称

• .（点号） ：代表一个空的网格单元
  

• none：不定义网格区域

grid-template

用于定义 grid-template-rows ，grid-template-columns，grid-template-areas缩写 (shorthand) 属性

• none：将所有三个属性设置为其初始值
• subgrid：将grid-template-rows，grid-template-columns的值设为 subgrid，grid-template-areas设为初始值
• / ：将 grid-template-columns和 grid-template-rows 设置为相应地特定的值，并且设置grid-template-areas为none

grid-column-gap / grid-row-gap

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

• ：长度值

grid-gap

grid-column-gap 和 grid-row-gap 的缩写

• ：长度值

justify-items

沿着 行轴线(row axis) 对齐 网格项(grid items) 内的内容（相反的属性是 align-items沿着列轴线对齐）。该值适用于容器内的所有网格项。

• start：将内容对齐到网格区域(grid area)的左侧
• end：将内容对齐到网格区域的右侧
• center：将内容对齐到网格区域的中间（水平居中）
• stretch：填满网格区域宽度（默认值）

align-items

沿着 列轴线(column axis) 对齐 网格项(grid items) 内的内容（相反的属性是 justify-items沿着行轴线对齐）。该值适用于容器内的所有网格项。

• start：将内容对齐到网格区域(grid area)的顶部
• end：将内容对齐到网格区域的底部
• center：将内容对齐到网格区域的中间（垂直居中）
• stretch：填满网格区域高度（默认值）

justify-content

有时，你的网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 行轴线(row axis) 对齐网格（相反的属性是 align-content，沿着列轴线对齐网格）。

• start：将网格对齐到 网格容器(grid container) 的左边
• end：将网格对齐到 网格容器 的右边
• center：将网格对齐到 网格容器 的中间（水平居中）
• stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
• space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
• space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
• space-evenly：在每个栅格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

align-content

网格合计大小可能小于其 网格容器(grid container) 大小。 如果你的所有 网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，在这种情况下，您可以设置网格容器内的网格的对齐方式。 此属性沿着 列轴线(column axis) 对齐网格（相反的属性是 justify-content，沿着行轴线对齐网格）。

• start：将网格对齐到 网格容器(grid container) 的顶部
• end：将网格对齐到 网格容器 的底部
• center：将网格对齐到 网格容器 的中间（垂直居中）
• stretch：调整 网格项(grid items) 的高度，允许该网格填充满整个 网格容器 的高度
• space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
• space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
• space-evenly：在每个栅格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

grid-auto-columns / grid-auto-rows

指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。在你明确定位的行或列（通过 grid-template-rows/ grid-template-columns），超出定义的网格范围时，隐式网格轨道被创建了。

• ：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）

子元素 网格项(Grid Items) 属性

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是网格项结束的网格线。

• ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
• span ：该网格项将跨越所提供的网格轨道数量
• span ：该网格项将跨越到它与提供的名称位置
• auto ：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度

grid-column / grid-row

分别为 grid-column-start+ grid-column-end和 grid-row-start+ grid-row-end 的缩写形式

• / ：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

grid-area

为网格项提供一个名称，以便可以 被使用网格容器 grid-template-areas属性创建的模板进行引用。 另外，这个属性可以用作grid-row-start + grid-column-start+ grid-row-end+ grid-column-end的缩写。

• ：你所选的名称
• / / / ：数字或分隔线名称

justify-self

沿着 行轴线(row axis) 对齐 网格项 内的内容（ 相反的属性是 align-self，沿着列轴线(column axis)对齐）。此值适用于单个网格项内的内容。

• start：将内容对齐到网格区域的左侧
• end：将内容对齐到网格区域的右侧
• center：将内容对齐到网格区域的中间（水平居中）
• stretch：填充整个网格区域的宽度（这是默认值）

align-self

沿着 列轴线(column axis) 对齐 网格项 内的内容（ 相反的属性是 justify-self，沿着 行轴线(row axis) 对齐）。此值适用于单个网格项内的内容。

• start：将内容对齐到网格区域的顶部
• end：将内容对齐到网格区域的底部
• center：将内容对齐到网格区域的中间（垂直居中）
• stretch：填充整个网格区域的高度（这是默认值）