Grid网格布局

简介

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

像表格一样，网格布局让我们能够按行或列来对齐元素。然而在布局上，网格比表格更可能做到或更简单。例如，网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

• 使用 display: grid 指定一个容器为网格布局，
• 使用 grid-template-columns 和 grid-template-rows 设置 列 和 行 的尺寸大小

和flex布局的区别​    

Grid布局和flex布局是有实质性的区别的，flex是一维布局，只能处理一个维度上的布局，一行或者是一列。但是Grid布局是二维布局 ，将容器划分成了“行”和“列”，产生了一个个的网格，可以将网格元素放在行和列相关的位置上，从而达到了布局的目的。

术语表

• 网格（Grid）：通过设置 CSS 属性 display: grid; 可以定义一个 CSS 网格。
• 网格线（Grid lines）：使用Grid 布局在显式网格中定义轨道的同时会创建网格线。若有一个3列2行的网格，则它有 4 条列线和 3 条行线。
• 网格轨道（Grid tracks）：网格轨道是两条网格线之间的空间。
• 网格单元格（Grid cell）：网络单元格是 CSS 网格中的最小单元。它是四条网格线之间的空间，概念上非常像表格单元格。
• 网格区域（Grid areas）：网格区域是网格中由一个或者多个单元格组成的一个矩形区域。当你使用基于网格线位置放置一个项目或者使用命名的网格区域定义区域时，网格区域被创建。
• 网格间隙（Gutters）：网格间距是网格轨道之间的间距，可以通过 grid-column-gap (en-US)，grid-row-gap (en-US) 或者 grid-gap (en-US) 在Grid 布局中创建。
• 网格轴（Grid Axis）：任何网格中都有两个轴，横轴（即行轴）和纵轴（即列轴）。
• 网格行（Grid row）：网格行是Grid 布局中的水平轨道，即两个水平网格线之间的空间。它通过属性 grid-template-rows 或者简写属性 grid， grid-template 定义。
• 网格列（Grid column）：网格列是Grid 布局中的垂直轨道，即两个垂直网格线之间的空间。它通过属性 grid-template-columns 或者简写属性 grid，grid-template 定义。

Grid父元素基本配置项

1.display:grid/inline-grid

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

2.grid-template-columns / grid-template-rows

定义每一列（columns）、每一行（rows）的大小

显示效果为 三列三行的网格布局，
列宽分别为 100px 200px 300px;
行高分别为 300px 200px 100px;

eg: {
    display: grid;
    grid-template-columns: 100px 200px 300px;
    grid-template-rows: 300px 200px 100px;
}

repeat()：
有时候，重复写同样的值非常麻烦，尤其网格很多时
这时，可以使用repeat()函数，简化重复的值
repeat()接受两个参数，第一个参数是重复的次数（下例是3），第二个参数是所要重复的值
repeat()重复某种模式也是可以的（）

eg: {
    display: grid;
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: repeat(3, 33.33%);
}

fr关键字：
为了方便表示比例关系，网格布局提供了fr关键字（fraction 的缩写，意为"片段"）。
如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍
fr可以与绝对长度的单位结合使用

eg: {
    display: grid;
    grid-template-columns: 150px 1fr 2fr;
}

3.column-gap / row-gap / gap:设置 列间距 / 行间距 / 间距大小

4.grid-auto-flow : row / column 排列方式

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格
默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行
也可以将它设成column，变成"先列后行"，还有 row dense 和 column dense

5.justify-content和align-content

place-content：align-content和justify-content属性的缩写

- justify-content
整个内容区域在容器里面的水平位置（左中右）
- align-content
整个内容区域的垂直位置（上中下）

子元素基本配置项

1.grid-area:

为 grid-row-start / grid-column-start / grid-row-end / grid-column-end 的简写形式
grid-area: 行开始 列开始 行结束 列结束

从第2行第1列开始，并跨越2行3列

grid-area: 2 / 1 / span 2 / span 3;

更多详情：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout