grid布局笔记

使元素设置为宫格布局

display: grid

使元素等分为3列（常用）

fr        可用空间等分

auto   浏览器决定长度

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: auto auto auto;

使元素分为3列的同时 自定义宽度

grid-template-columns: 100px 200px 300px;

给元素一个最小和最大的尺寸  第三个列宽最少也是要 300px  但是最大不能大于第一第二列宽的两倍

grid-template-columns: 1fr 1fr minmax(300px, 2fr);

自动填充 让一行（或者一列）中尽可能的容纳更多的单元格

repeat()   可以简化重复的值

grid-template-columns: repeat(auto-fill, 200px);

行间距与列间距简写方式（常用）

grid-gap: 10px;

grid-gap: 10px 20px;

单独设置行间距

grid-row-gap: 10px;

单独设置列间距

grid-column-gap: 20px;

未完