Grid佈局

       首先，從概念上來說這是一個網格佈局，核心是網格容器（Grid Container）和網格項（Grid Item），也就是parent和children的關係。與flex佈局相類似

       網格系統引入了新的單位：分數fr，每一個fr單元分配一個可用空間，如果元素被設定為1fr 1fr 1fr 1fr，那麼空間就會被平均分配為4份，每一個元素分別佔1/4。

      對於網格容器，設定css樣式為display:grid。分割網格容器：grid-template-columns:20% 20% 20% 20% 20%，表示將網格等分為5列，也可以簡寫為：grid-template-columns:repeat(5,20%) ，同樣grid-template-rows也是一樣的用法。其中repeat為函式。grid-template：50% 50% / 200px將建立一個具有兩行的網格，每一行佔據50%，以及一個200px的列。 grid-template：60% / 200px，表示60%的高度，200畫素的寬。

.contain{
display:grid;
justify-items:center;
grid-template-columns:repeat(5,20%);
}

       grid-columns-gap和grid-row-gap為網格線的寬度，類似於行/列之間的間距寬度。justify-items的用法和flex中的用法是一樣。

       auto-fit，自適應的意思，可以這樣使用grid-template-columns-repeat(auto-fit,50px)表示網格佈局系統會自動根據瀏覽器自行計算以及分佈n個50px寬度的網格項。

       grid-template-columns不僅僅接收百分比的值，也接收畫素或者em這樣的長度單位，甚至也可以混用，例如，

       對於網格項，grid-column-start、grid-column-end、grid-row-start、grid-row-end，表示行列的起始位置以及佔位。

.items{
grid-column-start:1;
grid-column-end:3;
grid-row-start:2;
grid-row-end:4;
}

也可以簡寫：grid-area:2/1/4/3;（格式為：grid-row-start/grid-column-start/grid-row-end/grid-column-end

針對grid-column-end和grid-row-end也可以用span關鍵字來寫，比如：grid-row-end：span 2，用span來指定需要跨越的寬度。

對於行而言，可以這樣簡寫：grid-row：1/3，從第一條線開始，到第三條線結束。同樣列也是這樣的。

更快的學習Grid佈局的小遊戲:

https://www.jianshu.com/p/5181bb590a9e?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation