html网格布局

grid布局概念

grid容器：采用grid布局的父元素
grid内容：显示项目的区域
grid项目：grid布局中每一格子内部放置的元素
行：横向
列：纵向
网格线：网格布局中的横向的纵向的线条
单元格：横纵线交汇的区域被称之为单元格
间距：网格与网格之间的距离被称为间距

一个m*n的网格，需要使用m+1条横向，n+1条纵向网格线组成

触发网格

display:grid;

划分行列属性

行属性：grid-template-rows{数值，数值，数值…}
列属性：grid-template-columns{数值，数值，数值…}

repeat(个数，数值)
auto-fill自动划分，放不下就不放
auto，把剩下的全填上
fr片段划分，按照比例划分
minmax（）如果条件允许，则一直使用最大值，如果条件不满足则使用中间值，如果剩下的距离不足以显示距离大小，则使用最小值

调整间距属性
grid-row-gap
grid-column-gap

内部顺序设置

grid-auto-flow：row（横向显示）/column（纵向显示）；
justify-item，align-item内容对齐方式
justify-content,align-content整个网格对齐方式
place-content：（align-content），（justify-content）；

单元格合并（好东西）

grid-column-start
grid-column-end
grid-row-start
grid-row-end