1、创建grid容器
display:grid;
2、设置容器中单元格的数量
grid-template-rows: repeat(3,10em);
grid-template-columns: repeat(3,10em);
3、排列顺序
/* 按照列排序 */
grid-auto-flow: column;
/* 按照行排序 */
grid-auto-flow: row;
4、项目超出单元格设定数量时,超出部份,行和列的显示方式
/* 超出部份,行设置为10em */
grid-auto-rows: 10em;
/* 超出部份,列设置为10em */
grid-auto-columns: 10em;
5、每个单元格之间的间距
/* 行间距,列间距 */
gap:5px 10px;
6、项目相对于容器,剩余空间的分配方式,垂直排列、水平排列
/* 顶部对齐、居中对齐 */
place-content: start center;
/* 两端对齐,分散对齐 */
place-content: space-between space-around;
7、项目相对于单元格,垂直排列、水平排列
place-items: end center;
8、项目占用单元格的数量,行开始,列开始,行结束,列结束
grid-area: 2 / 2 / span 2 / span 3;
9、单独设置项目,相对于单元格的对齐方式
place-self: start center;