1-10 grid布局

• grid-template-columns：用来给网格指定列数和列宽
• grid-template-rows：用来给网格指定行数和行高
• gap：单元格之间的距离
• fr：可以自动根据网格容器的宽度来计算列的宽度。（fr单位是一个自适应单位，fr单位被用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。）
• repeat :

• 补充知识：为了要设置网格容器内的项目（网格项目）位置，需要使用到网格布局属性，网格布局属性主要包括
• 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两个属性的缩写方式。
• grid-area：是这四个属性的缩写方式grid-row-start/grid-column-start/grid-row-end/grid-column-end

设置项目在单元格中的对齐

justify-items:center;
align-items:center;

设置网格在容器中对齐

justify-content:center;
align-content:center;

设置单个元素在单元格中的对齐

justify-self:staty(end);
align-self:staty(end);[

](https://blog.csdn.net/lhjuejiang/article/details/80001592)