grid網格佈局

• Grid 佈局只對專案生效
• 劃分網格的線，稱為"網格線"（grid line）。水平網格線劃分出行，垂直網格線劃分出列。

容器

• display: grid指定一個容器採用網格佈局
  • inline-grid
  • 容器子元素（專案）的float、display: inline-block、display: table-cell、vertical-align和column-*等設定都將失效
• grid-template-columns屬性定義每一列的列寬
  • grid-template-columns: 100px 100px 100px;
  • 除了使用絕對單位，也可以使用百分比。grid-template-columns: 33.33% 33.33% 33.33%;
  • 重複寫同樣的值非常麻煩，尤其網格很多時。這時，可以使用repeat()函式。grid-template-columns: repeat(3, 33.33%);
    • repeat()重複某種模式也是可以的。grid-template-columns: repeat(2, 100px 20px 80px);
  • 單元格的大小是固定的，但是容器的大小不確定。如果希望每一行（或每一列）容納儘可能多的單元格，這時可以使用auto-fill關鍵字表示自動填充。
    • grid-template-columns: repeat(auto-fill, 100px);
  • auto-fit則會盡量擴大單元格的寬度
  • 為了方便表示比例關係，網格佈局提供了fr關鍵字（fraction 的縮寫，意為"片段"）。如果兩列的寬度分別為1fr和2fr，就表示後者是前者的兩倍。
    • 分成3份grid-template-columns: 1fr 2fr;
• grid-template-rows屬性定義每一行的行高
  • grid-template-rows: 100px 100px 100px;