display:grid,栅格布局,

声明栅格布局容器

块级元素声明方式

display: grid;

行内块元素

display:inline-grid;

单元块的设置

repeat()

grid-template-columns:repeat(8,100px)
grid-template-columns:repeat(一列有几个块,每一个块的体积)
​
grid-template-rows:repeat(8,100px)
grid-template-rows:repeat(一行有几个块,每一个块的体积)

自定义块体积

grid-template-columns: repeat(2, 100px 20px 60px);
grid-template-columns: repeat(重复两遍, 第一个块的体积 第二个块的体积 第三个块的体积);

自动撑满

grid-template-columns: repeat(auto-fill, 100px);
grid-template-columns: repeat(自动撑满再换行, 体积);
表示每列宽度100px，然后自动填充，直到容器不能放置更多的列

体积单位

fr

grid-template-columns: 1fr 2fr;
两个宽度的列,表示后者是前者的两倍
grid-template-columns: 150px 1fr 2fr;
第一列的宽度为150像素，第二列的宽度是第三列的一半

限制最小宽度

grid-template-columns: 1fr 1fr minmax(100px, 1fr);
限制了第三个快,最小宽度为100px,最大宽度为1fr

自适应宽度

grid-template-columns: 100px auto 100px;
两遍固定宽度,auto自动撑满宽度

间距