【grid网格布局】

Grid 网格布局

通过设置CSS属性 display: grid;
可以定义一个 CSS 网格

注意，设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

Grid行与列的属性调节

grid-template-rows 属性定义网格布局中的列数，并可定义每列的宽度。

grid-template-columns 属性还可以用于指定列的尺寸（宽度）。
六种表达式：

1. length,百分比（占用容器的百分之几）

2. repeat(3,100px)

3. fr: grid-template-columns: 150px 1fr 2fr;

grid-template-columns: 100px 1fr max-content minmax(min-content, 1fr);

表示有4列，第一列100px固定尺寸，第三列 max-content 代表刚好包含元素不溢出不换行的尺寸，剩下的2列都是弹性尺寸。

按照弹性尺寸的计算规则，两者将均分（这两列的弹性系数相等，均为1）剩下的可用空间。
4. auto : auto关键字表示由浏览器自己决定长度。
5. minmax(200px, 400px)
minmax()函数使我们能够为轨道设置最小和最大大小，从而使Grid能够在其中运行。
7. maxcontent
8. grid-template 是grid-template-rows ，grid-template-columns简写。

grid-template: grid-template-rows/grid-template-columns
例如：grid-template: repeat(3,200px)/repeat(3,100px);
创建一个三行每行高度200px 三列每列宽度100px 的网格。

Grid的响应式布局

可以进行响应式布局
auto-fit,auto-fill
共同点：
1.就是尽可能多的创建轨道
2.然后不足一个轨道的空间平均分配给已有的轨道
区别

1. auto-fit的最后一步是，折叠空轨道，将空轨道的空间全部平均分配给已有元素的轨道
2. auto-fill的最后一步是保留空轨道留白，不会折叠空轨道
   注意：auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别

justify-content, align-content

justify-conten