CSS Grid

可以先參考「CSS-Grid與Bootstrap的比較」

以下整理幾個重點

1. HTML內容更易閱讀 套用Bootstrap會使得html檔案內的每個layout都需要自己的<div class="row">，尤其當網頁是RWD時，更需要放上冗長的套版。然而CSS-Grid並不會隨著layout的需求增多而使得html顯得更複雜(但當然比起Bootstrap就得撰寫css程式碼)。
2. 流動性增加 CSS-Grid讓網頁的layout能隨螢幕大小而流動，特別是能讓不同標籤的內容更換上下位置。若是套用Bootstrap，除非更改html文件的順序，否則layout是沒辦法上下互換的。
3. 不再受限於12格 當你想讓網頁中一行排列7個元件，Bootstrap的12格限制就會顯得麻煩，而CSS-Grid沒有這個限制。
4. 幾乎所有瀏覽器都有支援

---

內容參考自CSS-Grid教學

基本操作

初始設定

假設有份html長這樣

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

那我們能在CSS的部份做這樣的初始設定：

.container {
  display: gird;  /*啟用CSS-Grid*/
  grid-template-columns: 100px auto;  /*設定column兩個元件的寬度*/
  gird-template-rows: 50px 50px 200px;  /*設定row三個元件的高度*/
  grid-gap: 3px;  /*每個元件間的間隔*/
}

若希望columns或rows能以等比例方式呈現：

.container {
  grid-template-columns: 1fr 2fr;  /*column兩個元件以1:2呈現*/
  gird-template-rows: 2fr 1fr 3fr;  /*row三個元件以2:1:3呈現*/
}

平均等分：

.container {
  grid-template-columns: repeat(3, 1fr);  /*避免重複輸入fr*/
  gird-template-rows: repeat(2, 50x);
}

將columns與rows合併的寫法：

.container {
  grid-template: repeat(2, 50x) / repeat(3, 1fr);
}

排列

有一html檔如下

<div class="container">
  <div class="header">HEADER</div>
  <div="menu">MENU</div>
  <div class="content">CONTENT</div>
  <div class="footer">FOOTER</div>
</div>