display:grid

1.控制行和列的

grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows:33.33% 33.33% 33.33%;

2.repeat()

1.repeat()接受两个参数，第一个参数是重复的次数（上例是3），第二个参数是所要重复的值。grid-template-columns: repeat(3, 33.33%);
2.repeat()重复某种模式也是可以的。grid-template-columns: repeat(2, 100px 20px 80px);

3. auto-fill:不知道容器的宽度，但是知道每一个item的宽度，这个时候就会能放多少就放多少

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

4.fr 关键字：描述他们之前存在比列关系可以用这个，一下表示两列的比如相同

grid-template-columns: 1fr 1fr;

当和固定尺寸搭配时：会对剩余的空间进行比列分配

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

5.minmax()

1. minmax()函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值。
   2.grid-template-columns: 1fr 1fr minmax(100px, 1fr);
   3.上面代码中，minmax(100px,1fr)表示列宽不小于100px，不大于1fr。

6.auto关键字：决定让游览器自己定制宽度

grid-template-columns: 100px auto 100px;

7.网格线命名：也可以有多个名字：[c1 c2]

.container { display: grid; grid-template-columns: [c1] 100px [c2]
100px [c3] auto [c4]; grid-template-rows: [r1] 100px [r2] 100px [r3]
auto [r4]; }

8.块之间的间隔（不包括左右，只是形容块与块的间隔），下面代码的缩写是：grid-gap: ,也就是grid-gap: 20px 20px;
如果省略第二个值，游览器默认 第二个值与第一个相等。
最新标准写法改了，分别删除他们的前缀就行: ‘grid-’

grid-row-gap属性设置行与行的间隔（行间距），grid-column-gap属性设置列与列的间隔（列间距）。

.container { grid-row-gap: 20px; grid-column-gap: 20px; }

9.神器：grid-template-areas，直接划分出区域，其中不需要利用的用.来代替

grid-template-areas: ‘a b c’
‘d e f’
‘g h i’;

grid-template-areas: ‘a a a’
‘b b b’
‘c c c’;

10.grid-auto-flow:默认是row，也就是块的排序方式，从左到后，
改为column变为从上到下排序。
grid-auto-flow: row dense; 表示"先行后列"，并且尽可能紧密填满，尽量不出现空格

11.justify-items 属性，：start | end | center | stretch;
align-items 属性，：start | end | center | stretch;
place-items 属性：是前两个的合体
是指容器里面的布局

12.justify-content 属性，：start | end | center | stretch | space-around | space-between | space-evenly;
align-content 属性，
place-content 属性
整个内容区域在容器中的什么区域

13.当有多余的内容时，游览器会根据内容的大小来分配网格的大小，这是可以用
grid-auto-columns 属性，
grid-auto-rows 属性
这两个属性来决定多余的内容的网格大小，用法和grid-template-columns一样

14.grid-column-start 属性，
grid-column-end 属性，
grid-row-start 属性，
grid-row-end 属性

控制每一个网格的开始和结束，
还可以使用网格线的名字，
还可以使用 span表示横跨几个网格线
grid-column-start:span 2;

15.决定将网格放在哪一个区域 ：grid-area:e；

16.grid-area: / / / ;

17.justify-self 属性，
align-self 属性，
place-self 属性

这个用法和justify-items用法一样，但是只针对于单个网格