Day6 | 淺談 Grid 排版 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 6

自我挑戰組

那些 Notion 中的前端筆記系列第 6 篇

Day6 | 淺談 Grid 排版

14th鐵人賽

echocarrie

2022-09-21 13:33:25

1316 瀏覽

分享至

grid 排版上類似表格，先於外層使用 row 與 column 畫出所需數量的列與欄格線，內層設定好區塊後再放置外層的格子中。

❒ 外層屬性

「 grid-template-rows|columns 」與「 grid-auto-rows|columns 」擇一使用。

屬性：

display
- 屬性值為 grid。
grid-template-rows 設定格線列
- 屬性值可為百分比、px、fr。
grid-template-columns 設定格線欄
- 屬性值可為百分比、px、fr。
grid-auto-rows
grid-auto-columns
grid-template-area ：需搭配內層屬性 grid-area。
- 屬性值：設定區塊位置，把內層自訂名稱 grid-area 屬性值帶入，像排格子一樣。
- 屬性值中如果要產生空白也可使用 .。CodePen 範例
grid-auto-flow 可控制主軸為平行或垂直。
- 屬性值：row、column。
justify-items、justify-content、align-content：與 flex 用法一樣。
grid-gap、grid-column-gap、grid-row-gap : 格線水平與垂直間隔。

grid 格線單位 fr

fr 為 grid 的格線單位，分數的部分需使用 fr 為單位。
grid-template-columns: 2fr 2fr 1fr 1fr; 為 2/6 2/6 1/6 1/6 ( 分母 6 為 2+2+1+1 )。

縮寫

grid-template-rows|columns 列欄屬性值相同時可使用 repeat，為 repeat(次數, 格線)。

/* 等同於 25% 25% 25% 25% */
grid-template-rows: repeate(4, 25%);
grid-template-columns: repeate(4, 25%);

/* 同於 25% 25% 25% 100px */
grid-template-rows: repeate(3, 25%) 100px;

❒ 內層屬性

「 grid-area 」與「 grid-row、grid-column 」擇一使用，遇到多欄位可使用「 grid-row、grid-column 」比較方便，下方會有範例。

屬性：

grid-area ：需搭配外層屬性 grid-template-area 。命名好自訂名稱後，帶入「外層 grid-template-area 」的中，也就是看內層的區塊要放到外層的哪些格子內。
- 屬性值：自訂名，例 grid-area: A1，A1 為自訂名。
grid-row
- 屬性值：從第幾條線開始/從第幾條線結束;，例 1/3 即從第一條線開始到第三條線結束的區塊。
- 屬性值也可為負數 ( 倒數的意思 )，在外層沒有設定幾欄幾列時也可使用，例 2/-3 即從第二條線開始至倒數第三條線結束的區塊。
- 為 grid-row-start、gird-row-end 縮寫
grid-column
- 屬性值與 grid-row 一樣。
- 為 grid-column-start、gird-column-end 縮寫
justify-self、align-self：與 flex 用法一樣。

// grid-row|column 屬性值，線的概念 ↑

❒ 實作

實作 1. `grid-template-rows|columns` 搭配 `grid-area`

CodePen 範例

<div class="container">
  <div class="AA">A</div>
  <div class="BB">B</div>
  <div class="CC">C</div>
</div>

.container {
  width: 800px;
  height: 800px;
  outline: 2px solid gray;
  display: grid;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: 25% 25% 25% 25%;
  grid-template-areas: 
  'B3 B3 B3 B1'
  'B3 B3 B3 B1'
  'B2 B2 B2 B1'
  'B2 B2 B2 B1';
}

.AA {
  background-color: #9dd3a8;
  grid-area: B1;
}

.BB {
  background-color: #ffad60;
  grid-area: B2;
}

.CC {
  background-color: #d9d9f3;
  grid-area: B3;
}

// 圖層拆解 ↑

外層使用 grid-template-rows|columns 分別設定要幾欄幾列。
內層自行命名要哪些區塊，這邊設定三個區塊 .AA .BB .CC 分別命名為 B1 B2 B3。
把命名的區塊帶回外層的 grid-template-areas 空間中，如上圖。
- 注意：外層 grid-template-areas 中「空間是不能分離的」不然會無法顯示。如下，把列中第二排第三個 B3 改成 B1，就無法正常顯示囉！
```
'B3 B3 B3 B1'
'B3 B3 B1 B1'
'B2 B2 B2 B1'
'B2 B2 B2 B1'
```

實作 2. `grid-auto-rows|columns` 搭配 `grid-row|column`

Codepen 範例

內層使用 grid-row|column，外層就可以不使用 grid-template-areas。
內層使用 grid-row|column 是可以讓內層區塊重疊的，如範例中 C 與 D 。
如果不想要使用 grid-auto-rows|columns 也可以使用 grid-template-rows|columns 自己先設定好要幾欄幾列。

示意圖

實作 2-2. 遇到很多欄列的組合

示意圖
// 圖片出處：CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線 ↑

遇到很多欄列的組合，使用「 grid-template-rows|columns 、grid-template-area 」搭配 grid-area 就會呈現上圖中密密麻麻的 grid-template-area，這時就可以改用「 grid-auto-rows|columns 搭配 grid-row|column 」。