CSS——Grid网格布局
Grid网格布局
网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
Grid 布局与 Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大。
Grid布局是一个二维布局方法，纵横两个方向总是同时存在。
划分：
作用在grid容器上的：
grid-template-columns 属性，
grid-template-rows 属性
grid-row-gap 属性，
grid-column-gap 属性，
grid-gap 属性
grid-template-areas 属性
grid-auto-flow 属性
justify-items 属性，
align-items 属性，
place-items 属性
justify-content 属性，
align-content 属性，
place-content 属性
grid-auto-columns 属性，
grid-auto-rows 属性
grid-template 属性，
grid 属性
作用在grid子项上的
grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性
grid-column 属性，
grid-row 属性
grid-area 属性
justify-self 属性，
align-self 属性，
place-self 属性
一、作用在grid容器上的CSS属性
grid-template-columns和grid-template-rows
对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)
有时候，我们划分网格是很规律的，如果需要添加多个纵横网格时，可以利用repeat()语法进行简化操作。
grid-template-areas和grid-template
area是区域的意思，grid-template-areas就是给我们的网格划分区域的(划分区域只能形成矩形，特殊图形不可以)。
此时grid子项只要使用grid-area属性指定隶属于哪个区。
grid-template
是grid-template-columns,grid-template-rows,grid-template-areas属性的缩写。
grid-row-gap和grid-column-gap：
grid-row-gap和grid-column-gap属性用来定义网格中网格间隙的尺寸。
grid-gap
是grid-row-gap和grid-column-gap属性的缩写。grid-gap:横向尺寸 纵向尺寸
justify-items和align-items 属性：
justify-items指定了网格属性的水平呈现方式，是水平拉伸显示，还是左中右对齐。
align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
place-items
可以让align-items和justify-items属性写在单个声明中。
取值：
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
justify-content和align-content 属性：
justify-content指定了网格元素的水平分布方式。
align-center指定了网格元素的垂直分布方式。
place-content
可以让align-content和justify-content属性写在单个CSS声明中。
取值：
stretch 默认值，拉伸。表现为水平或垂直填充
start 表现为容器左侧或顶部对齐
end 表现为容器右侧或底部对齐
center 表现为水平或垂直居中对齐
space-between 表现为两端对齐
space-around 享有独立不重叠的空白空间
space-evenly 平均分配空白空间
grid-auto-columns和grid-auto-rows 属性：
有时候，一些项目的指定位置，在现有网格的外部。比如网格只有3列，但是某一个项目指定在第5行。这时，浏览器会自动生成多余的网格，以便放置项目。
grid-auto-columns属性和grid-auto-rows属性用来设置浏览器自动创建的多余网格的列宽和行高。它们的写法与grid-template-columns和grid-template-rows完全相同。
如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。
二、作用在grid容器子项上的CSS属性
grid-column-start
水平方向上占据的起始位置
grid-column-end
水平方向上占据的结束位置(span属性)
grid-row-start
垂直方向上占据的起始位置
grid-row-end
垂直方向上占据的结束位置(span属性)
grid-column：
grid-column-start + grid-column-end的缩写
例： grid-column：2 / 3
grid-row
grid-row-start + grid-row-end的缩写
例： grid-row：2 / 3
grid-area
表示当前网格所占用的区域，名字和位置两种表示方法
例：grid-area: 3/2/4/4 第一个值是水平的起始位置，第二个值是垂直的起始位置，第三个值是水平的结束位置，第四个值是垂直的结束位置
justify-self
单个网格元素的水平对齐方式
例：justify-self:end;
align-self
单个网格元素的垂直对齐方式
例：align-self:start;
place-self
align-self和justify-self的缩写
例：place-self: start end; 第一个值是align-self(垂直方向)，第二个值是justify(水平方向)
