grid布局常用属性

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;