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用法一樣，但是隻針對於單個網格