grid 网格布局
兼容情况
部分属性兼容IE10+ 不兼容低版本安卓旧机型(4\5\6)
- 部分属性不兼容IE，例如：
space-evenly
布局概念
容器(container)：采用网格布局的区域，一般指父元素(包裹元素)
项目(item)：直系子单元格，子元素
容器(container)
display: grid
列宽: grid-template-columns
指定单元格列宽。演示地址
css
/* 写多少个就是多少列，每个对应列的宽度(其实就是子元素的宽度) */
grid-template-columns: 100px 100px 100px;
/* 每个单元格宽度100px，auto-fill: 自动填充满一行，会自动换行 */
grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(2, 100px) /* 两列， 每列100px*/
/* fr(fraction片段)，除去第一列宽度100px，剩下的空间两列平分 */;
grid-template-columns: 100px 1fr 1fr行高: grid-template-rows
指定单元格高度(渲染不确定的子元素时较少用)
css
/* 写多少行就是指定多少行的单元格高度【不确定行数的情况下, 一般不用这个属性，直接在子元素上写height】 */
grid-template-rows: 100px 100px;
/* 下面这种写法发现只指定了第一行的高度 */
grid-template-rows: 使用repeat(auto-fill, 100px) ;行间距/列间距: grid-gap
自定行间距与列间距，为grid-column-gap、grid-row-gap的简写
css
/* 行间距为25px 列间距为30px(列间距也可以通过justify-content: space-around;弹性设定) */
grid-gap: 25px 30px;内容排列：justify-content、align-content
指定整个内容区域在容器里面的水平/垂直位置 演示地址
css
/* 子元素‘行’对齐方式 均分多余空间 */
justify-content: space-evenly;
/* 子元素‘列’对齐方式 均分多余空间(包裹元素高度固定时有效) */
align-content: center;单元格内容排列：justify-items、align-items
单元格内容的水平/垂直排列方式 演示地址
css
/* start | end | center | stretch */
justify-items: center;隐式单元格的宽高设置：grid-auto-columns、grid-auto-rows(不常用)
显示单元格：在 grid-template-columns 和 grid-template-rows 属性中定义的行和列
隐式单元格：超出了显示单元格的定义外的单元格 演示地址
排列顺序：grid-auto-flow(不常用)
指定单元格排列顺序，默认row 演示地址
单元格区域：grid-template-areas(配合grid-area) (不常用)
指定容器的单元格区域 演示地址
项目(item)
指定自身单元格区域：grid-area [见上↑]
自身单元格排列：justify-self、align-self
指定自身元素在单元格中的放置位置
css
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;