CSS Grid Layout

為 Interview Bit 的第 29 題。

首先先介紹 Grid 的專有名詞的介紹。

• Grid Container
• Grid Line
• Grid Track
• Grid Area
• Grid Item
• Grid Cell

下圖的圖片全源自於 CSS Tricks。

Grid Container

元素的 css 有 display: grid的元素就叫做 Grid Container。

<div class="container">
  <div class="item item-1"> </div>
  <div class="item item-2"> </div>
  <div class="item item-3"> </div>
</div>

依照上面的 HTML，可以知道 <div class="container"></div> 為 Grid Container。

Grid Line

中文叫做網格線，也就是一條一條的線。下圖黃色的部分屬於 Grid line。

Grid Track

可以看成 Grid 的 row 或是 column，下圖黃色的部分屬於 Grid track。

Grid Area

一個 grid area 可以由任意數量的 grid cell 組成。不管幾個格子，只要有一個格子被塗滿，該塗滿的面積就叫做 Grid Area。下圖黃色的部分屬於 Grid Area。

Grid Item

Grid container 的直接子項目，已以下例子來說， .item 為直接子項目，所以為 grid item，.sub-item 就不算直接子項目。

<div class="container">
  <div class="item"> </div>
  <div class="item">
    <p class="sub-item"> </p>
  </div>
  <div class="item"> </div>
</div>

Grid Cell

一格一格畫出的方塊就叫做 Grid Cell。Grid 由很多個 Grid Cell 所組成的，為 Grid 的基本單位。

參考資料：
A Complete Guide to Grid