Display

https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

grid 網格

Grid 是在 2011 年出現的排版方式，比 Flex 還要晚兩年面世。 Grid 出現不是為了要取代 Flex （ 如同 Flex 對 Float 的打擊），而是讓網頁的主 Layout 能夠更簡單的被拉出來，而細節的方面再搭配 Flex 處理內容的排列。

Grid 也是新增在 display 的新屬性，在排版上的應用類似於表格，可以為一整個區塊創建 X * Y 的子區域，並將 Grid 內的區塊排列放置格子中。

Grid Track 網格軌道

Grid Track裡透過grid-template-columns / grid-template-rows 屬性定義行與列。這兩個屬性上設置每一個格的寬度。如果用 grid-template-columns 來說，設定為 100px 100px 100px 100px ，就代表這個 Grid Box 內擁有四格，且每格寬度都是 100 px ， grid-template-rows 的設定也一樣，在設定完 X 與 Y 軸格線後， Grid Box 就會將內部的區塊整齊排列在每一個格子中：

html

    <div class="wrap">
        <div class="border">One</div>
        <div class="border">Two</div>
        <div class="border">Three</div>
        <div class="border">Four</div>
        <div class="border">Five</div>
        <div class="border">Six</div>
    </div>

CSS

.wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px 200px 200px;
      grid-template-columns: 200px 200px 200px 200px;
}

fr單位

每一格之間的寬度或高度，也有 px 外的另一個單位能做調整，那就是 fr ， fr 是一個比例的概念。下方範例只有第三個位置調整，所以第三欄位就會占滿全部的寬度。

HTML

    <div class="wrap">
        <div class="border">One</div>
        <div class="border">Two</div>
        <div class="border">Three</div>
        <div class="border">Four</div>
        <div class="border">Five</div>
        <div class="border">Six</div>
    </div>

CSS

.wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 200px 200px 1fr;
      grid-template-columns: 200px 200px 1fr;
}

效果

repeat() 標記

含有許多軌道的格線能用 repeat() 標記，以使軌道透過迴圈表列數次。以下面為例：

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

可以寫成

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

重複標記使用軌道表列，因此可以用它來建立重複的模式。下個例子的格線，會包含十個軌道：也就是 1fr 後面有 2fr 的軌道，並重複五次。

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr 2fr);
}

明/暗式格線(Explicit/Implicit grid)

• 明式格線(Explicit grid)

  需清楚定義整個 container 具有多少行以及多少列，可客製化每個網格的寬高 grid-template-columns/grid-template-rows 屬於此類。

• 暗式格線(Implicit grid)

  無需清楚定義整個 container 具有多少行以及多少列，無法客製化每個網格的寬高 grid-auto-columns/grid-auto-rows 屬於此類。

下例將使用 grid-auto-rows 以確保由暗式格線建立的軌道，高度都會是 200 像素。

html

<div class="wrap">
   <div>One</div>
   <div>Two</div>
   <div>Three</div>
   <div>Four</div>
   <div>Five</div>
</div>

css

.wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
}

Grid 縮放 - minmax()

在設定顯式格線或希望自動給軌道一個最小尺寸，但也要確保它們擴展以適應任何添加的內容——像是希望某行不能小於 100 像素以避免跑版，但如果內容高度超過 300 像素，該行就要拉到那麼高。

針對這個情境，格線提供了 minmax() 函式。本例中，我針對 grid-auto-rows 指定了 minmax() 的數值。它會指定高度最小要 100 像素，最大則是 auto。auto 意味著大小會檢查內容大小，並適配這一行 cell 內最高項目的高度。

html

<div class="wrapper">
  <div>One</div>
  <div>Two
    <p>I have some more content in.</p>
    <p>This makes me taller than 100 pixels.</p>
  </div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}