CSS-grid

發表於 | 更新於 | 分類於 | 評論數：

CSS grid 排版
透過 grid template 來定義版型的結構，分別由 column 及 row 定義出直排與橫列的格線，內容再依隔線作安排可跨行跨列排版

可參考

CSS Grid Terminology

  • grid Line : 分隔元素的線，可以是垂直與水平，如下圖的紅色線
  • grid Track : 兩條分隔線中間的區域，簡單想就是 Grid 中的 Columns 或 Rows，如下圖的綠色區塊
  • grid Cell : Grid 中的基本單位，四條線組成的區域，如下圖的藍色區塊。
  • grid Area : 由數個 Cell 組成的區域，如下圖的紅色區塊。
  • track-size : fr 單位，通常用於分配 row 或 column 的非彈性尺寸設定完後之剩餘空間。以下圖的 column為例，意思即：將去掉 100px 與 10px 後的剩餘空間，分配為 30% 與 70%
  • line-name: 可自行命名的名稱

title

grid 外容器屬性

  • display
  • 網格行列設定
    • grid-auto-flow : row | column | row dense | column dense
    • grid-template-areas : grid-template-columns | grid-template-rows
    • grid-template : none | subgrid | grid-template-rows / grid-template-columns
    • grid-gap = grid-column-gap + grid-row-gap
  • 網格對齊位址
    • justify-items
    • align-items
    • justify-content
    • align-content

grid 內容器屬性

  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • grid-column
  • grid-row
  • grid-area
  • justify-self
  • align-self

外容器

display

  • grid
  • inline-grid

title

網格行列設定

  • grid-auto-flow
    • 設定 格線 的長寬度
    • 沒有明確放置在網格上的網格項（grid items），自動放置算法會自動放置這些網格項
      • row：自動佈局 每行
      • column：自動佈局 每列
      • row dense | column dense：自動佈局算法在稍後出現較小的網格項時，嘗試填充網格中較早的空缺，可能導致網格項出現亂序

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.flow, .flow2{
  display: grid;
  grid-template-columns: 60px 60px 60px 60px ;
  grid-template-rows: 30px 30px;

  grid-auto-flow: row;

  height: 100px;
  width: 450px;
  margin: 0 10px;
  border: 2px solid #f76707;
}

.flow2{
  grid-auto-flow: column;
}
  • grid-template-areas
    • 透過 area 定義區塊在 template 上的位置，概念就是在畫面上登記屬於該元素的空間，此部分要內外元素一起看
      • 外元素 grid-template-areas：定義空間的位置，是透過幾組字串的組合 (名稱會通過區域在排列位置）
      • 內元素 grid-area：定義空間的名稱
      • .（點號）：代表一個空的網格單元
      • none：不定義網格區域

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.warp4{
  display:grid;
  grid-template-columns: 100px 50px auto 50px 100px;
  grid-template-rows: 25% auto 100px;

  grid-template-areas:
    "head head head head head"
    "side  main main main main"
    "side foot foot foot foot";

  height: 250px;
  width: 400px;
  margin: 10px;
}
  • grid-template
    • none：將所有三個屬性設置為其初始值
    • subgrid：將 grid-template-rows，grid-template-columns 的值設為 subgrid，grid-template-areas 設為初始值
    • grid-template-rows / grid-template-columns：
      • 將 grid-template-columns 和 grid-template-rows 設置為相應地特定的值，並且設置 grid-template-areas 為 none

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.warp5{
  display:grid;

  grid-template: 1fr 50px 2fr / 20% 50px 1fr;

  height: 250px;
  width: 400px;
  margin: 10px;
  border: 2px solid #f76707;
  grid-template-areas:
   "header header header"
   "main main main"
   "footer footer footer";
}
  • grid-template-columns | grid-template-rows
    • 定義的行列所組成
  • <line-name>
    • 指定網格線(Grid Line)名稱

title

1
2
3
4
5
6
7
8
9
10
11
12
// <line-name> -> [first],[line2],[line3],[col4-start],[five],[end]
.warp{
  display: grid;

  grid-template-columns: [first] 100px [line2] 50px [line3] auto [col4-start] 50px [five] 100px [end];
  grid-template-rows: 25% auto 100px;

  height: 250px;
  width: 400px;
  margin: 10px;
  border: 2px solid #f76707;
}
  • grid-gap = grid-column-gap + grid-row-gap
    • 定義行與列間距
  • grid-column-gap
    • 左右間距
  • grid-row-gap
    • 上下間距

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.warp2{
  display: grid;
  grid-template-columns: 100px 50px auto 50px 100px;
  grid-template-rows: 25% auto 100px;

  grid-column-gap: 10px;
  grid-row-gap: 20px;
  grid-gap: 10px 20px;  

  height: 250px;
  width: 400px;
  margin: 10px;
  border: 2px solid #f76707;
}
  • fr 是因應 CSS grid 而產生的新單位，全名是 fraction (分數)，是數學分子 + 分母的那個分數
    • 在剩餘空間中所占的比例
    • 可以用 fr 去設定 CSS grid 的相對寬度，以達到 RWD 的縮放效果
    • 如果是跟前面範例一樣使用 px，縮放的時候是不會有 RWD 的
    • 可以混搭單位
  • repeat(重覆幾次, 重覆的寬度)
    • 重複 grid 的設定
    • 最左邊跟最右邊的 grid 如果不會重覆，可以接在 repeat 的前後

title

1
2
3
4
5
6
7
8
9
10
.warp3{
  display:grid;

  grid-template-columns: repeat(2,1fr 2fr 1fr) 50px;

  height: 250px;
  width: 400px;
  margin: 10px;
  border: 2px solid #f76707;
}

網格對齊位址

  • justify-items - 主軸 「水平對齊」每個網格區域的位置
    • 網格對齊位置
    • 沿著內聯（行）軸對齊網格項（與沿著塊（列）軸對齊的項對齊）
    • start：將內容對齊到網格區域（grid area）的左側
    • end：將內容對齊到網格區域的右側
    • center：將內容對齊到網格區域的中間（水平居中）
    • stretch：填滿網格區域寬度（默認值）

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.warp6, .warp7, .warp8, .warp9 {
  display:grid;
  grid-template-columns: auto 50px auto;
  grid-template-areas:
   "head head head"
   "foot ";

  justify-items: start;
  justify-items: end;
  justify-items: center;
  justify-items: stretch;

  height: 50px;
  width: 200px;
  margin: 0 5px;
  border: 2px solid #f76707;
}
  • align-items - 主軸 「垂直對齊」每個網格區域的位置
    • 沿著列軸線（列軸）對齊網格項（grid items）內的內容

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.warp10, .warp11, .warp12, .warp13 {
  display:grid;
  grid-template-columns: auto 50px auto;
  grid-template-areas:
   "head head head"
   "foot ";

  align-items:start;
  align-items:end;
  align-items:center;
  align-items:stretch;

  height: 50px;
  width: 200px;
  margin: 0 5px;
  border: 2px solid #f76707;
}
  • justify-content - 網格區域 在 網格容器內 的「水平對齊」位置
    • start：將網格對齊到網格容器（grid container）的左邊
    • end：將網格對齊到網格容器的右邊
    • center：將網格對齊到網格容器的中間（水平居中）
    • stretch：調整網格項（grid items）的寬度，允許該網格填充滿整個網格容器的寬度
    • space-around：在每個網格項之間放置一個均勻的空間，左右兩端放置一半的空間
    • space-between：在每個網格項之間放置一個均勻的空間，左右兩端沒有空間
    • space-evenly：在每個柵格項目之間放置一個均勻的空間，左右兩端放置一個均勻的空間

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.warp14, .warp15, .warp16, .warp17, .warp18, .warp19, .warp20 {
  display:grid;
  grid-template-columns: auto 50px auto;
  grid-template-areas:
   "head head head"
   "foot ";

  justify-content:start;
  justify-content:end;
  justify-content:center;
  justify-content:stretch;
  justify-content:space-around;
  justify-content:space-between;
  justify-content:space-evenly;
  
  height: 100px;
  width: 150px;
  margin: 0 5px;
  border: 2px solid #f76707;
}
  • align-content - 網格區域 在 網格容器內 的「垂直對齊」位置

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.warp21, .warp22, .warp23, .warp24, .warp25, .warp26, .warp27 {
  display:grid;
  grid-template-columns: auto 50px auto;
  grid-template-areas:
   "head head head"
   "foot ";

  align-content:start;
  align-content:end;
  align-content:center;
  align-content:stretch;
  align-content:space-around;
  align-content:space-between;
  align-content:space-evenly;

  height: 100px;
  width: 150px;
  margin: 0 5px;
  border: 2px solid #f76707;
}

內容器

  • grid-column-start | grid-column-end | grid-row-start | grid-row-end
    • 物件所佔的空間位置，column 及 row 所到的起始點及終點
    • 通過指定網格線（grid lines）來確定網格內網格項（grid item）的位置
    • number | name | span number | span name | auto
      • span number - 物件所佔用的欄位數
      • span name - 物件所在的 grid 名稱
      • auto - 自動

title

1
2
3
4
5
6
7
8
9
10
11
12
13
.item-boxIn {

  grid-column-start: 2;
  grid-column-end: 4; 
  grid-row-start: 2;
  grid-row-end: 3;

  height: 100%;
  width: 100%;
  border: 2px solid #f76707;
  background-color: #fff4e6;
  text-align:center;
}
  • grid-column = grid-column-start + grid-column-end
  • grid-row = grid-row-start + grid-row-end

title

1
2
3
4
5
6
7
8
9
10
11
.item-boxIn2 {

  grid-column: 2 / span 3; 
  grid-row: 3 / auto;
  
  height: 100%;
  width: 100%;
  border: 2px solid #f76707;
  background-color: #fff4e6;
  text-align:center;
}
  • grid-area: <row-start> / <column-start> / <row-end> / <column-end>
    • 為網格項提供一個名稱，以便可以被使用網格容器 grid-template-areas 屬性創建的模板進行引用

title

1
2
3
4
5
6
7
8
9
10
.item-boxIn3{
  display:grid;

  grid-area: header;
  grid-area: 1 / 2 / 4 / 5;

  border: 2px solid #f76707;
  background-color: #fff4e6;
  text-align:center;
}
  • justify-self: start | end | center | stretch
    • 沿著行軸線（row axis）對齊網格項的內容 此值適用於單個網格項目的內容
    • 控制自己在網格中的位置

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.item-boxIn4, .item-boxIn5, .item-boxIn6{
  display:grid;

  justify-self:start;
  justify-self:end;
  justify-self:center;
  justify-self:stretch;

  height: 30px;
  width: 60px;
  grid-area: 1 / 1 / 3 / 3;
  border: 2px solid #f76707;
  background-color: #fff4e6;
  text-align:center;
}
  • align-self: start | end | center | stretch
    • 沿著列軸線（列軸）對齊網格項內的內容 此值適用於單個網格項目的內容
    • 控制自己在網格中的位置

title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.item-boxIn8, .item-boxIn9, .item-boxIn10{
  display:grid;

  align-self:start;
  align-self:end;
  align-self:center;
  align-self:stretch;

  height: 30px;
  width: 60px;
  grid-area: 1 / 1 / 3 / 3;
  border: 2px solid #f76707;
  background-color: #fff4e6;
  text-align:center;
}

自動響應式排列

  • auto-fill
    • 不隨容器區域改變
  • minmax
    • 最小和最大尺寸

title

1
2
3
4
5
6
7
8
.warp30 {
    display: grid;
    grid-gap: 5px;

    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));

    grid-auto-rows: 50px;
}
  • auto-fit
    • 隨容器區域改變

title

1
2
3
4
5
6
7
8
.warp31 {
    display: grid;
    grid-gap: 5px;

    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    
    grid-auto-rows: 50px;
}
0%