有点类似table布局，但是比table更灵活更优于flex布局。
案例：
.container {
display: grid;
grid-template-columns: 30px 30px 30px; //3列每列30px宽
grid-template-rows: 30px 30px 30px; //3行每行30px高
}
<div class="container">
<!--无需在里面定义div元素，单元表格完全可以使用css来操作-->
</div>
网格容器(可以理解为<table>)：
以下是容器拥有的属性
display: grid | inline-grid; //必须声明，为一个容器定义grid才能使用以下属性功能，块状|内联
//显示表格 grid-template-columns: 25% 25% 25% 25%; //列，多少个参数就多少个列 grid-template-rows: 25% 100px auto; //行，多少个参数就多少行 grid-template: //是grid-template-columns、grid-template-rows、grid-template-areas三个属性的简写
//隐示表格 grid-auto-columns:30px //如果一个单元表格的位移超出了原来容器，那么布局会被破坏掉，可以预先设置好单元表格的宽度，此时超出的部分会自动生成列表且宽度为30px grid-auto-columns / grid-auto-rows
grid-column-gap: 10px; //列之间的间距 grid-row-gap: 15px; //行间距 grid-gap: //grid-row-gap和grid-column-gap的缩写
justify-items:start | end | center | stretch(默认); //水平方向对齐(类似操作<td>里面的元素对齐)， 左对齐|右对齐|居中|填满表 格(类似width:100%) align-items: start | end | center | stretch;//垂直方向对齐(类似操作<td>里面的元素对齐)， 顶部对齐|底部对齐|居中|填满表格(类 似height:100%) place-items //<align-items> 和 <justify-items>的缩写
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个容器水平对齐 align-content: start | end | center | stretch | space-around | space-between | space-evenly; //整个容器垂直对齐 place-content:<align-content> <justify-content>的简写
grid-auto-flow: row(默认) | column | row dense | column dense //row时以行为准自动填满，column时以列为准自动往左填满
grid: 是grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto- flow的缩写
grid-template-areas: //不常用，需要看案例，要多个值配合才行
网格项(可以理解为<tr><td>)：
以下是单元格拥有的属性
单个表单的合并和位移，以下4个属性需要同时配合(需看案例配合)： grid-column-start grid-column-end grid-row-start grid-row-end 等同以下 grid-column //grid-column-start和grid-column-end缩写 grid-row //grid-row-start和grid-row-end缩写
justify-self: start | end | center | stretch; //单个表格的水平方向对齐 align-self: start | end | center | stretch; //单个表格的垂直方向对齐 place-self: //align-self 和 justify-self 的简写形式
grid-area//不常用
repeat()函数
display不能为 inline-grid;
案例1 grid-template-columns: 1fr 1fr 1fr; 等同 grid-template-columns: repeat(3, 1fr); //3个1fr列，一个3列
案例2 grid-template-columns: repeat(5, 1fr 2fr); //5个 1fr 2fr，也就是一个10列
案例3 grid-template-columns: 10px repeat(8, 1fr) 20px; //第一列为10px，第二到第9列为1fr，最后一列为20px
案例4 grid-template-columns: repeat(auto-fill或者auto-fit, 20px); //auto-fill、auto-fit会以容器的宽度和20px为准，来决定重复的次数
minmax()
display不能为 inline-grid;
minmax(最小值,如果小于最小值就会触发该值)
grid-template-columns: repeat(3,minmax(50px,1fr)); //3个以大于或等于50px的列宽 grid-template-columns: repeat(3,minmax(50px,1fr));
自适应效果：
display不能为 inline-grid;
grid-template-columns: repeat(auto-fill,minmax(50px,1fr)); //自适应布局
参考：