网格布局

一、什么是网格布局

网格布局，顾名思义就是像网一样有一个个格子一样的布局。在一个容器里面，我们可以切割成很多行很多列，形成一个个网格，从而对这些网格进行规则性的排序，使用，达到我们复杂的页面布局效果。

Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。

Flex 布局是轴线布局，有主轴和侧轴之分，只能指定容器内子元素针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成 "行 "和 "列 "，产生单元格，然后指定 "项目所在 "的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。

二.网格布局的使用

1.grid基本属性

网格容器和项目

首先，我们要知道网格布局也是有“容器”和“项目”的，既给容器设置上display: grid;或者display: inline-grid; 表明该容器是网格容器，这个元素的所有直系子元素将成为网格元素。

grid：指明该容器本身是块级元素，块级元素独占一行。

inline-grid ：指明该容器本身是一个行内元素，行内元素可以和其他行内元素共占一行。

container是一个网格容器，item为网格元素。而grandson却不是网格元素，所以父容器只能影响儿子容器。

网格线 grid line分隔网格结构的分界线。它们可以是垂直（‘列网格线’）或水平（‘行网络线’）

网格单元 grid cell

网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。

网格轨道 grid track

grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列。一个网格轨道就是网格中任意两条线之间的空间。就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小，用来控制宽度或高度。

网格区域 grid area

多个网格线包围的总空间。网格区域可以包含任意数量的网格单元。