Docs99

Appearance

Return to top
On this page

Grid Item 網格項目屬性

⚡ 快速進入

➡️ 水平 網格線 定義 網格區域 grid-row-*

可以透過 grid-row-start:、grid-row-end: 水平網格線 區間來定義，網格項目 的 網格區域 位置。

  • grid-row-start: 起點

  • grid-row-end: 終點

item

value:

  • line
  • span <跨越數量>
  • span <跨越到的網格線名稱>
  • auto
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item
item

Demo

將 網格項目 位置，定義在水平 網格線 第 2 條 ~ 第 4 條之間。下面顯示各種不同方式的寫法。

item
css
.container {
  display: grid;
  grid-template: 
  [row-line-1] 30px [row-line-2] 90px [row-line-3] 90px [row-line-4] 60px [row-line-end] 
  /
  [col-line-1] 90px [col-line-2] 60px [col-line-3] 60px [col-line-4] 90px [col-line-5] auto [col-line-6] 60px [col-line-end] ;
}

1️⃣ 指定網格線 (第幾條)

css
.item {
  grid-row-start: 2;
  grid-row-end: 4;
}

2️⃣ 指定網格線名稱

css
.item {
  grid-row-start: row-line-2;
  grid-row-end: row-line-4;
}

3️⃣ 指定跨越格數

從 網格線名稱 row-line-2，向下跨越 2 格。

css
.item {
  grid-row-start: row-line-2;
  grid-row-end: span 2;
}

4️⃣ 指定跨越名稱

從第 4 條 網格線 ，向上跨到 row-line-2 網格線。

css
.item {
  grid-row-start: span row-line-2;
  grid-row-end: 4;
}

⬇️ 垂直 網格線 定義 網格區域 grid-column-*

透過垂直的 grid-column-start、grid-column-end 網格線，來定義 網格項目 的 網格區域 位置。

  • grid-column-start 起點

  • grid-column-end 終點

item

value:

  • line
  • span <跨越數量>
  • span <跨越到的網格線名稱>
  • auto

Demo

將 網格項目 位置，定義在水平 網格線 第 3 條 ~ 第 6 條之間。下面顯示各種不同方式的寫法。

item
css
.container {
  display: grid;
  grid-template: 
  [row-line-1] 30px [row-line-2] 90px [row-line-3] 90px [row-line-4] 60px [row-line-end] 
  /
  [col-line-1] 90px [col-line-2] 60px [col-line-3] 60px [col-line-4] 90px [col-line-5] auto [col-line-6] 60px [col-line-end] ;
}

1️⃣ 指定網格線 (第幾條)

css
.item {
  grid-column-start: 3;
  grid-column-end: 6;
}

2️⃣ 指定網格線名稱

css
.item {
  grid-column-start: col-line-3;
  grid-column-end: col-line-6;
}

3️⃣ 指定跨越格數

起點是第 3 條 網格線，跨 3 格到終點。

css
.item {
  grid-column-start: 3;
  grid-column-end: span 3;
}

4️⃣ 指定跨越到的網格名稱

終點是 網格線 col-line-6，跨越到 網格線 col-line-3。

css
.item {
  grid-column-start: span col-line-3;
  grid-column-end: col-line-6;
}

水平、垂直定義 網格區域

定義水平 網格線 第 2、4 條、垂直網格線 第3、6條 之間的 網格項目。

item
css
.item {
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 6;
}

🟢 定義 網格區域 (縮寫) grid-row | column

  • grid-row: <grid-row-start> / <grid-row-end>

  • grid-column: <grid-column-start> / <grid-column-end>

item
css
.item {
  grid-row: 2 / 4;
  grid-column: 3 / 6;

  /* 相等 */
  grid-row-start: 2;
  grid-row-end: 4;
  grid-column-start: 3;
  grid-column-end: 6;
}

🌟 網格項目命名 && 網格區域終極縮寫 grid-area

網格項目 命名

對 網格項目 命名，供 grid-template-areas 定義排版位置。

Header
Main
Sidebar
Footer

1️⃣ 網格項目 命名

css
.header {
  grid-area: header;
}
.main {
  grid-area: main;
}
.sidebar {
  grid-area: sidebar;
}
.footer {
  grid-area: footer;
}

2️⃣ 網格容器 grid-template-areas 指定排版位置

css
.container {
  grid-template-areas:
  '. header header header header .'
  'sidebar sidebar main main main main'
  'sidebar sidebar . . . . '
  'footer footer footer footer footer footer'
  ;
}

提醒

Header
Main
Sidebar
Footer
無指定
grid-area

網格區域終極縮寫

可以一次將 grid-row、grid-column 都設置進去。

語法

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end> ;

item
css
.item {
  grid-area: 2 / col-line-3 / 4 / col-line-6;

  /* 相等 */
  grid-row: 2 / 4;
  grid-column: col-line-3 / col-line-6;
}

➡️ ⬇️ 網格單元 對齊方式

針對 網格單元 來定義內容的對齊方式，影響到 網格項目 的顯示的位置。

水平對齊 justify-self

  • 靠左 justify-self: start;
  • 靠右 justify-self: end;
  • 水平置中 justify-self: center;
  • 水平撐滿 justify-self: stretch; (默認值)
1
2
3
4
5
6
css
.item {
  justify-self: start;
}
1
2
3
4
5
6
css
.item {
  justify-self: end;
}
1
2
3
4
5
6
css
.item {
  justify-self: center;
}
1
2
3
4
5
6
css
.item {
  justify-self: stretch;
}

垂直對齊 align-self

  • 靠上 align-self: start;
  • 靠下 align-self: end;
  • 垂直置中 align-self: center;
  • 垂直撐滿 align-self: stretch; (默認值)
1
2
3
4
5
6
css
.item {
  align-self: start;
}
1
2
3
4
5
6
css
.item {
  align-self: end;
}
1
2
3
4
5
6
css
.item {
  align-self: center;
}
1
2
3
4
5
6
css
.item {
  align-self: stretch;
}
item
item
item
item
item
item

🟢 網格單元 對齊方式 (縮寫) place-self

語法

place-self: <align-self> / <justify-self>

css
.item {
  place-self: center / end;

  /* 相等 */
  justify-self: end;
  align-self: center;
}

Reference