CSS Grid Layout
又被稱為網格佈局

簡而言之就是將畫面切割成若干方格
再依照想要的位置把方塊放進去！

會使用到的屬性有

display:grid
grid-template-rows
grid-template-columns
grid-column
grid-row

在開始之前我們要先知道grid的運作方式
網格的區塊是由一條條交錯的線組成
所以先使用grid-template-columns和grid-template-rows畫出我們的線框
接著再使用grid-column和grid-row畫出格子的範圍

首先先把HTML寫好
為了方便辨識所以
.grid是線框
.item是格子

<div class="grid">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
    <div class="item4"></div>
    <div class="item5"></div>
    <div class="item6"></div>
</div>

接著就是CSS囉！
Columns(X軸) 和 rows(Y軸)
為了畫出格線我們要使用
grid-template-rows 和 grid-template-columns
這兩個屬性一定要加s

先把最外層的div加上display:grid
然後設定columns跟rows的數量跟尺寸
像下面這邊就是個三格，每格都是150px

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
}

畫好線框後就可以在.item裡面設定位置囉！
設定的方式是使用grid-column和grid-row(不用加s)

grid-column是X軸的位置
grid-row是Y軸的位置

.item1{
    background: red;
    grid-column: 1;
    grid-row: 1;

}

.item2{
    background: green;
    grid-column: 1;
    grid-row: 2;
}

... ...

把所有的item設定好之後就可以得到3 * 3的格子囉！

grid也可以運用在網頁佈局上
這個時候我們需要再多加幾樣設定
grid-template-areas
grid-area
這兩樣設定的用途是先用grid-area給格子們取名字
再使用grid-template-areas讓格子們依照編排好的隊伍排隊

先在item們裡面設定grid-area
接著在grid增加grid-template-areas這個屬性，想留白的話就給他一個.就可以囉！

.grid {
  display: grid;
  grid-template-columns: 150px 150px 150px;
  grid-template-rows: 150px 150px 150px;
  
  grid-template-areas: 
  "item1 . item2"
  "item1 . item2"
  "item1 . item2"
  ;
}

.item1{
    background: green;
    grid-area: item1;

}

.item2{
    background: red;
    grid-area: item2;
}

在學Bootstarp的時候意外發現的東西
由於當時正在苦惱有沒有能夠替代Bootstarp的方案所以小小的玩了一下，不太確定要拿這個來排版該怎麼排...

以上！