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(水平方向)