Grid Items 相關屬性。
數值指的是 Grid Column Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
數值指的是 Grid Row Line 的意思。
span 2:指的是擴展兩個欄的意思。
例:
原來九個欄位如下:
將 4 的那個欄位,擴展到 4、5、7、8,變成如下:
例 1:使用 Grid Line 來設定範圍:
例 2:使用 grid-area 來將欄位指定位置(例:將 1 和 9 對調):
例 3: grid-area
也可以用來設定這個 Item 的名稱,然後就可以在 Grid Container
中使用 grid-template-areas
中直接指定名稱。
範例請參考 grid-template-areas
屬性。
請參考 justify-items
。
請參考 align-items
。
請參考 place-items
。
是 justify-self
和 align-self
的簡寫形式,格式如下:
建立 grid_practice.html
來練習,請貼上以下原始碼:
使用 Grid 排版模式,變成如下圖佈局:
例如 header.grid_item
:
參考作法:
給定各個 Item 命名如下:
參考作法:
display
屬性設定:
grid
:區塊類型的 Grid Layout。
inline-grid
:行內區塊類型的 Grid Layout。
例:
以九宮格為例:
觀察開發者工具:
有設定 display 為 grid
或 inline-grid
的元素,就叫做 Grid container
。
在 Grid Container
裡面的第一層子元素,統稱叫做 Grid Items
。
Grid Row Track:
Grid Column Track:
留意每條 Grid Line 都有自己的編號,如下所示;也可以反向的來數,反向的話,就是從 -1
開始數。
Row Axis:也稱做 Inline Axis。
Column Axis:也稱做 Block Axis。
例:
例:
設定 3 欄,每欄寬度自動分佈:
設定 2 欄,第一欄寬度是 100px,第二欄寬度是 150px:
例:
設定第一列的高度為 100px,第二列的高度為 150px:(註:大部份情況,高度應由內容來撐)
例:
需先瞭解 grid-column
及 grid-row
,才能瞭解 dense
部份。
row
:預設值,設定 Items 沿著 row 的方向依序出現。
column
:設定 Items 沿著 column 的方向依序出現。
row dense
:加上 dense 會讓 Items 遞補。
column dense
:加上 dense 會讓 Items 遞補。
例:
各列高度由 grid-template-rows
來設定,
其它列沒有指定到高度的,如下範例,第一個列設定 200px,下一個列設定 300px,再下一列會是 200px,以此類推:
例:
各欄寬度由 grid-template-columns
來設定,
其它欄沒有指定到寬度的,如下範圍,第一個欄設定 120px,下一個欄設定 180px,再下一欄會是 120px,以此類推:
例:
需先瞭解 grid-area
,才能瞭解 grid-template-areas
部份。
用途:
在 Grid Items 使用 grid-area
來設定各個 Item 的名稱。
然後就可以在 Grid Container 中使用 grid-template-areas
來做排版。
grid-template-areas
的語法:
以雙引號(單引號也可)當做是一個列,然後如果要表達下一個列,那就再使用雙引號,各列的雙引號以空格做區隔。
有一個符號是 .
,代表的意思是沒有名稱的 Grid Item。
例 1:
例1:
例2:
例:
第一個參數:表示「第二個參數的內容」,要重覆幾次。例:
第一欄的寬度是 100px ~ 200px,例:
fr
是 fraction of the free space,也就是剩餘空間,以比例方式來分配,例:
grid-column-gap
在 CSS3 中,已更名為 column-gap
。
grid-row-gap
在 CSS3 中,已更名為 row-gap
。
grid-gap
在 CSS3 中,已更名為 gap
。
例:
設定 Items 沿著 Row(Inline) Axis
來排列。
可設定的屬性值有:
stretch
:預設,寬度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的左邊。
end
:設定 Item 在自己 Cell 的右邊。
center
:設定 Item 在自己 Cell 的中間。
例:
justify-self
是在 Grid Items 上設定,只作用於 Item 自己。
設定 Items 沿著 Column(Block) Axis
來排列。
可設定的屬性值有:
stretch
:預設,高度填滿整個 Cell。
start
:設定 Item 在自己 Cell 的上方。
end
:設定 Item 在自己 Cell 的下方。
center
:設定 Item 在自己 Cell 的中間。
例:
align-self
是在 Grid Items 上設定,只作用於 Item 自己。
是 justify-items
和 align-items
的簡寫形式,格式如下:
place-self
是在 Grid Items 上設定,只作用於 Item 自己。
全部的 Items,一起沿著水平方向 Row(Inline) Axis
的排列,可以設定的屬性值有 7 個,如下:
stretch
:預設值。
start
:置左。
end
:置右。
center
:置中。
space-around
:Grid Items 之間的距離會是最左邊、最右邊的兩倍大。
space-between
:Grid Items 最左邊會靠左、最右邊會靠右,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最左邊、最右邊,距離都是相同的。
例:
全部的 Items,一起沿著垂直方向 Column(Block) Axis
的排列,可以設定的屬性值有 7 個(與 justify-content
屬性相同),如下:
stretch
:預設值。
start
:置頂。
end
:置底。
center
:置中。
space-around
:Grid Items 之間的距離會是最上方、最下方的兩倍大。
space-between
:Grid Items 最上方會置頂、最下方會置底,其餘距離均分。
space-evenly
:Grid Items 之間的距離及最上方、最下方,距離都是相同的。
例:
是 justify-content
和 align-content
的簡寫形式,格式如下: