CSS - 初步了解 CSS Gird - (變化版面)

發表於 | 分類於

前言

在上一篇我們知道如何使用 CSS Grid 的固定版面樣式，這一篇就來筆記一下如何變化

子層指定格線

上一篇我們在父層使用 grid-template-areas 設定版面位置，但如果使用這個方式，你不能交錯也不能重疊，所以我們可以使用子層來指定欄位位置

grid-column-start, grid-column-end, grid-row-start, grid-row-end

  • grid-column-start : 欄線開始
  • grid-column-end : 欄線結束
  • grid-row-start : 列線開始
  • grid-row-end : 列線結束

我們設定 grid-template-columns, grid-template-rows

1
2
3
4
.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

產生的圖如下圖

圖源來自CSS-Tricks
圖片來自CSS-Tricks

從圖上可以了解，線是從最外圍(最起點)開始算到另一邊的最外圍(最終點)，所以以圖片來看 column 一共有6條線，而 row 有4條線

得到線條的方式有

1
2
3
4
5
6
.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}
  • line : 用數字表示 物件 所在的線
  • span number : 物件所佔用的欄位數；使用此方式，會計算到佔用欄位數的下一行
  • span name : 物件所在的 grid 名稱；使用此方式，會計算到物件 gird 名稱的下一行
  • auto 自動

以上面圖為範例就能這樣使用

1
2
3
4
5
6
.item {
  grid-column-start: 2; /*從第2條線開始計算*/
  grid-column-end: 5;  /*結束到第5條線*/
  grid-row-start: 1; /*從第1條線開始計算*/
  grid-row-end: span 2;  /*橫跨2個欄位後結束*/
}

只橫跨一個欄位

另外，如果你只想要橫跨一個欄位的話，可以使用 start 或者 end 其中一個就好

1
2
3
4
5
.item-a{
  grid-column-start: 2; /*從第2條欄線開始從左到右開始計算一個欄位數*/
  grid-row-end: 3; /*第3條列線結束從下到上計算一個欄位數*/
  background: #faa;
}

負數

除了正數以外，也可以只用負數計算

1
2
3
4
5
.item-b{
  grid-column-end: -3; /*第-3條欄結束線從右到左計算一個欄位數*/
  grid-row-start: -4; /*第-4條線開始計從上到下算一個欄位數*/
  background:#aaf
}

grid-column, grid-row

  • grid-column : grid-column-start + grid-column-end 的結合，使用 “/“ 連結在一起
  • grid-row :grid-row-start + grid-row-end 的結合，使用 “/“ 連結在一起
1
2
3
4
.item-c {
  grid-column:3/span 2; /*第3條欄開始橫跨2個欄位數*/
  grid-row:-2/-1; /*第-2條列開始到-1條線結束*/
}

圖源來自CSS-Tricks
圖片來自CSS-Tricks

grid-area

grid-area不只能自訂區域名稱給予grid-template-areas定義位置，也能指定 grid 線數設定範圍

1
2
3
4
 .item-d {
   /* 列線開始線，欄線開始線，列線結束線，欄線結束線 */
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>
}

以上給個範例:

父層自動欄高/自動列高

grid-template-columns , grid-template-rows 是需要設定欄位寬高，但如果格子很多的話，這樣就不方便了，所以我們就可以使用父層自動計算欄高/列高

grid-auto-columns grid-auto-rows

自動生成的欄位的大小

1
2
3
4
.container {
  grid-auto-columns: <track-size> ...;
  grid-auto-rows: <track-size> ...;
}

首先我們給予的長寬

1
2
3
4
.container {
  grid-auto-columns: 60px;
  grid-auto-rows: 90px;
}

意思就是每個欄位寬為60px，高都是90px;
圖片來自css-tricks
圖片來自CSS-Tricks

這時我們再定義子層的配置

1
2
3
4
5
6
7
8
.item-a {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.item-b {
  grid-column: 5 / 6;
  grid-row: 2 / 3;
}

圖片來自css-tricks
圖片來自CSS-Tricks

你會發現即使 item-b 的欄，我們從未定義第5或6列，但因為 grid-auto-columns 的關係，中間產生了隱藏格線，484很神奇~

結論

最後整理上面所學到的屬性:
grid-column-start: 子層欄線起始
grid-column-end: 子層欄線結束
grid-row-start: 子層列線起始
grid-row-end: 子層列線結束
grid-column: 子層欄線起始/結束
grid-row: 子層列線起始/結束
grid-auto-columns: 自動欄寬
grid-auto-rows: 自動列高

參考文獻

CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線
CSS Grid 屬性介紹
A Complete Guide to Grid
圖片來自CSS-Tricks