Grid

Posted on | In

簡述

我在這挑戰JS地下城1F-九九乘法中，使用陌生GRID以及HTML、CSS、JS將九九乘法表呈現出來去完成它．
以下簡述GRID…

1F原始檔、1F DEMO

定義與特性

MDN定義：格線是一組水平線和垂直線的交叉集合：一個定義為行（row），另一個定義為列（column）。
你可以讓各元素依照行列的規則放到各格線上
一切都建立要從建立格線容器（grid container）開始

格線佈局具有以下特性 :::

  1. 尺寸設定具有彈性
    • 固定：pixel
    • 靈活：百分比、fr(此單位為因grid產生)
  2. 單元佈置
    • 使用行號、名字、目標區域，讓各單元放到精確的位置
  3. Creation of additional tracks to hold content
  4. 控制對齊
  5. 使用z-index控制重疊內容


格線容器

元件要成為格線容器時，需要定義容器的顯示類型。
宣告以後，該元素的所有直接子元素會變成格線單位（grid item）
set to grid or inline-grid

1
2
3
.grid-container {
  display: grid;
}

格線軌道（Grid Track）

透過 grid-template-columns 與 grid-template-rows 屬性定義了行與列，也定義了格線軌道。
定義的數量代表了多少區塊 ex: 1fr 1fr = 2個區塊

格線軌道定義的單位與方式

  1. 單位 - fr 、 ％、px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Ａ. fr單位
>> 代表格線容器內可用空間的分塊（fraction)、可用比例的概念去理解

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; // 3個區塊
}

B. %
>> 以區塊為100%, 去切分需要的百分比

.grid-container {
  display: grid;
  grid-template-columns: 20% 30% 50%;
}

C. px
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px;
}

  1. 單位可以混用

    1
    2
    3
    4
    .grid-container {
      display: grid;
      grid-template-columns: 500px 1fr 2fr;
    }

  2. repeat(次數, 值) - 以迴圈表現

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

  3. 軌道縮放與 minmax()
    希望有高度一定，但又不要跑版的情境，可以用minmax()

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

  4. 明式與暗式格線
    透過 grid-auto-rows 與 grid-auto-columns 屬性，給軌道定義一套大小。

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

圖片來源：MDN
mdnGrid

Grid Lines

Note!
當我們定義一個格線(grid)，我們是定義一個區塊、一個grid track，而非線條、行．
因為定義track 而產生 line

Positioning items against lines（根據行、線定位項目）

column => 由左線調至右線條，row => 由最上面線條至下方
已 3 X 2 的 grid, column line 有4條， row line有3條，可參照圖片

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-row (start / end)
  • grid-column (start / end)
  • grid-area (row-start / column-start / row-end / column-end)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .wrapper { 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        grid-auto-rows: 100px; 
    } 
    .box1 { 
        grid-column-start: 1; 
        grid-column-end: 4; 
        grid-row-start: 1; 
        grid-row-end: 3; 
    }

Gutters

Gutters between grid cells can be created using the 「 grid-column-gap」、 「grid-row-gap」、「grid-gap」
Gutters 所指的為下方區塊與區塊間的黃色部分


gutter

1
2
3
4
5
6
7
// 使用方式
.wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-column-gap: 10px;
   grid-row-gap: 1em;
}

memo

  1. 內容器的定位模式，與 flex 使用方式一樣。 ex: justify-self
  2. nesting :: grid 可以再grid