Docs99

Appearance

Return to top
On this page

Grid Container 網格容器屬性

⚡ 快速進入

提醒

操作前，建議先了解 Grid 網格系統 及相關術語。

🔴 display (必填屬性)

這個屬性宣告，會將元素建立為 網格容器 ，它「直接子層」都會變成 網格項目。

value:

  • grid block 區塊容器
  • inline-grid inline 行內容器
css
.container {
  display: grid;
}

🔪 網格水平分割 grid-template-rows

藉由此設置來定義容器中「水平」 Grid Track 網格軌道 空間，可以是「指定尺吋」或者「按比例」分割，可以混合設置。👉 尺吋設置方法

1 (30px)
2 (60px)
3 (90px)
css
/* 指定軌道尺吋 */
.container {
  grid-template-rows: 30px 60px 90px;
}

👉 尺吋設置方法

命名網格線

在「網格軌道」尺吋之間，可以用 [] 設置「網格線」的名稱。

css
.container {
  grid-template-rows: [first] 30px [line2] 60px [line3] 90px [end];
}

🔪 網格垂直分割 grid-template-columns

藉由此設置來定義容器中「垂直」 Grid Track 網格軌道 空間，可以是「指定尺吋」或者「按比例」分割，可以混合設置。👉 尺吋設置方法

1 (4fr)
2(8fr)
3(2fr)
4(4fr)
5(8fr)
6(2fr)
css
.container {
  /* 按比例分配 */
  grid-template-columns: 4fr 8fr 2fr;
}

命名網格線

在「網格軌道」尺吋之間，可以用 [] 設置「網格線」的名稱。

css
.container {
  grid-template-columns: [first] 4fr [line2] 8fr [line3] 2fr [end];
}

🟢 分割網格 grid-template (簡寫)

藉由此設置來定義容器中「垂直」、「水平」 Grid Track 網格軌道 的空間，可以是「指定尺吋」或者「按比例」分割，可以混合設置。

可以同時設置「水平」、「垂直」網格 grid-template-rows、grid-template-columns 的寫法。

css
.container {
  display: grid;
  grid-template: <grid-template-rows> / <grid-template-columns>;
}

尺吋設置方法

可使用設置值: 20%、20px、2fr、auto、repeat(n, size)

TIP

  • 「fr 按比例」: 剩餘空間等於 fr 數字總合，再按 fr 設置數字分配空間。
  • 「repeat(幾個空間, 空間尺吋)」 可以使用這個方式來設置多個「重覆」的空間。

注意

當混合單位設置，會先切割 30px空間，剩除空間才會按 5fr 2fr 比例分配。

css
.container {
  grid-template-rows: 30px 5fr 2fr;
}

📍 [網格區域]定義 grid-template-areas

語法可以視覺化的定義「網格區域」中的指定 網格單元，使用 . 來表示空白的「網格單元」，none 來表示無定義。

Header
Main
Footer
Sidebar
Header
Main
Sidebar
Footer

1️⃣ 指定網格單元名稱

為 網格項目 指定 網格單元 名稱

css
.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: main;
}
.item-3 {
  grid-area: footer;
}
.item-4 {
  grid-area: sidebar;
}

2️⃣ 「網格區域」定義 grid-template-areas

定義 網格區塊 中，所有 網格單元 的配置。 (使用「空白」間隔)

css
.container {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
    'none header header .'
    'sidebar main main main'
    'footer footer footer .';
}

網格單元 會是這樣配置:

noneheaderheader.
sidebarmainmainmain
footerfooterfooter.

📏 [網格線]寬度 Gap

設置 網格線 的寬度，通常用來定義 網格單元 的間距。

1
2
3
4
5
6
7
8
9
  • row-gap: <size> (水平方向)
  • column-gap: <size> (垂直方向)
  • gap: <row-gap> <column-gap> (縮寫)

Demo

css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);

  row-gap: 10px; /* 網格線 (橫) 寬度 */
  column-gap: 50px; /* 網格線 (直) 寬度 */

  gap: 10px 50px; /* 簡寫 <row-gap> <column-gap> */
}

注意

gap 若無完善設置，如 gap: 10px;，就會自動調整全部「相同」的寬度。

舊語法再不再支持

grid-row-gap、grid-column-gap 有 grid 前綴的寫法，在 Chrome 68+, Safari 11.2 Release 50+, and Opera 54+ 已不再支持了，請使用無前綴的寫法。

➡️ 網格單元水平對齊 justify-items

可以決定 網格單元 內容的「水平」對齊方式。

value:

  • start 靠左對齊
  • end 靠右對齊
  • center 水平置中
  • stretch 水平撐滿 (默認值)

靠左對齊 justify-items: start;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  justify-items: start;
}

靠右對齊 justify-items: end;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  justify-items: end;
}

水平置中 justify-items: center;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  justify-items: center;
}

水平撐滿 justify-items: stretch;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  justify-items: stretch;
}

⬇️ 網格單元垂直對齊 align-items

可以決定 網格單元 內容的「垂直」對齊方式。

value:

  • start 靠上對齊
  • end 靠下對齊
  • center 垂直置中
  • stretch 垂置撐滿 (默認值)

向上對齊 align-items: start;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, auto);
  align-items: start;
}

向下對齊 align-items: end;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, auto);
  align-items: end;
}

網格單元內容「垂直置中」 align-items: center;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, auto);
  align-items: center;
}

網格單元內容「垂直拉伸」 align-items: stretch;

1
2
3
4
5
6
7
8
9
10
11
12
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, auto);
  align-items: stretch;
}

🟢 網格單元對齊模式(縮寫) place-items

同時設置 align-items 與 justify-items 的縮寫。

value:

  • <align-items> <justify-items>
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, auto);
  place-items: center center; /* place-items: center; */
}

➡️ 網格容器水平對齊 justify-content

某些時候，分割的 網格單元 總數是「小於」 網格容器，可以輕鬆使用這個方法，來調整 網格容器 內容 網格單元 的水平對齊方式。

value:

  • start 靠左對齊 (默認值)
  • end 靠右對齊
  • center 水平置中
  • space-between 水平分散
  • space-around 左、右 1/2，中間均分空間
  • space-evenly 環繞均分所有空間

靠左對齊 justify-content: start;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: start;
}

靠右對齊 justify-content: end;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: end;
}

水平置中 justify-content: center;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: center;
}

水平分散 justify-content: space-between;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: space-between;
}

左右 1/2，中間均分 justify-content: space-around;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: space-around;
}

所有空間均分分散 justify-content: space-evenly;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 80px) / repeat(3, 80px);
  justify-content: space-evenly;
}

⬇️ 網格容器垂直對齊 align-content

某些時候，分割的 網格單元 總數是「小於」 網格容器，可以輕鬆使用這個方法，來調整 網格容器 內容 網格單元 的垂直對齊方式。

value:

  • start 靠上對齊 (默認值)
  • end 靠下對齊
  • center 垂直置中
  • space-between 垂直分散
  • space-around 上、下 1/2，中間均分空間
  • space-evenly 垂直均分所有空間

靠上對齊 align-content: start;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: start;
}

靠下對齊 align-content: end;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: end;
}

垂直置中 align-content: center;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: center;
}

垂直分散 align-content: space-between;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: space-between;
}

上、下 1/2，中間空間均分 align-content: space-around;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: space-around;
}

垂直均分所有空間 align-content: space-evenly;

Grid
css
.container {
  display: grid;
  grid-template: repeat(3, 100px) / repeat(3, 100px);
  align-content: space-evenly;
}

🟢 網格容器對齊模式(縮寫) place-content

css
.container {
  place-content: <align-content> / <justify-content>;
}

🔒 自動生成網格尺吋定義 grid-auto-*

當 網格單元 指定的位置，超出原本定義 網格容器 分割網格的數量時，Grid 系統會自動生成網格單元來補足中間的空隙，而自動生成的 網格單元 尺吋是「自動」分配的。

可以使用下面的方式為自動生成的 網格單元 定義尺吋:

  • grid-auto-rows 指定「高度」
  • grid-auto-columns 指定「寬度」

說明

網格容器 定義了分割四格的網格，若 網格項目 也只有四個，其尺吋都會符合定義值。

css
.container {
  display: grid;
  grid-template: 30px 30px / 60px 60px;
}
30*60
30*60
30*60
30*60

當指定位置的 網格單元，超出了原先在 網格容器 分割的網格區域時，就會自動生成的 網格單元 尺吋是「自動」分配的。

css
.item-1 {
  grid-row: 3 / 4;
  grid-column: 6 / 7;
}
.item-2 {
  grid-row: 4 / 5;
  grid-column: 7 / 8;
}
30*60
30*60
自動分配
自動分配
item-1
item-2

為生成網格定義尺吋

當設置了 grid-auto-rows、grid-auto-columns，網格就會此來自動生成。

css
.container {
  display: grid;
  grid-template: 30px 30px / 60px 60px;
  grid-auto-rows: 90px; // 定義高度
  grid-auto-columns: 120px; // 定義寬度
}
30*60
30*60
30*90
30*90
120*90
120*90

注意

但原先定義的尺吋，在「行」「例」上還是會影響到部分的區塊單一邊長度；不在影響的區塊就可以完整的顯示指定的尺吋。

🧑‍🦯 網格項目 分配方向 grid-auto-flow

這是關係到 網格項目 怎麼被分配到 網格單元 上，一般默認都是水平方向往右排列 (row)，滿了就跳下一行。但，也可以透過這個設置來改變分配方向。

value:

  • row 水平方向 (默認)
  • row dense 緊密水平方向
  • column 垂直方向
  • column dense 緊密垂直方向

➡️ 水平方向 row

1
2
3
4
5
6
7
8
9
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  grid-auto-flow: row;
}

⬇️ 垂直方向 column

1
2
3
4
5
6
7
8
9
css
.container {
  display: grid;
  grid-template: repeat(3, auto) / repeat(3, auto);
  grid-auto-flow: column;
}

🟡 網格配置 grid (縮寫)

可以針對以下的所有屬性進行配置，這是一個很簡化的寫法。

  • grid-template-areas
  • grid-template-rows
  • grid-template-columns
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

分割網格

配置方式與 grid-template: 完全相同。

value: <grid-template-rows> / <grid-template-columns>

css
.container {
  display: grid;
  grid: 20px 40px 80px / 30px 60px 90px;

  /* 完全相同👇 */
  grid-template: 20px 40px 80px / 30px 60px 90px;

  /* 完全相同👇 */
  grid-template-rows: 20px 40px 80px;
  grid-template-columns: 30px 60px 90px;
}

分配方向 && 分割網格

除了分割網格，還同時可以設置 網格項目 分配方向，auto-flow 寫的位置決定它的方向。

  • 分配方向 row

    auto-flow [dense] <grid-template-rows> / <grid-template-columns>

    css
    .container {
  display: grid;
  grid: auto-flow repeat(3, auto) / 20px 40px 80px;

  /* 完全相同👇 */
  grid-auto-flow: row;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 20px 40px 80px;
}

  • 分配方向 column

    <grid-template-rows> / auto-flow [dense] <grid-template-columns>

    css
    .container {
  display: grid;
  grid: repeat(3, auto) / auto-flow dense 20px 40px 80px;

  /* 完全相同👇 */
  grid-auto-flow: column dense;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: 20px 40px 80px;
}

Reference