Grid 網格容器
display
啟用網格系統，
inline
或者
block
grid-template
決定網格的
列(row)
跟
行(column)
grid-template-columns: 12px 12px 12px;
grid-template-rows: 12px 12px 12px;
grid-template-columns:
repeat
(3, 12px);
grid-template-rows: repeat(3,
1fr
);
grid-template-columns: 8px auto 8px;
grid-template-rows: 8px auto 12px;
grid-template-columns: 22% 22% auto;
grid-template-rows: 22% auto 22%;
justify-items (內容|
水平
)
決定
元素內容
在
cell
內水平方向的對齊
justify-items: stretch;
(預設)
align-items (內容|
垂直
)
決定
元素內容
在
cell
內垂直方向的對齊
align-items: stretch;
(預設)
justify-content (格子|
水平
)
控制所有
網格元素
在
水平方向
上的分佈
justify-content: start; (靠左)
justify-content: stretch;
(預設: Normal)
justify-content: space-around;
justify-content: space-between;
justify-content: space-evenly;
align-content (格子|
垂直
)
控制所有
網格元素
在
垂直方向
上的分佈
align-content: start; (靠上)
align-content: stretch;
(預設)
align-content: space-around;
align-content: space-between;
align-content: space-evenly;
grid-gap
指定列和行
間距
的大小
grid-row-gap: 1px;
grid-column-gap: 9px;
grid-gap
: 1px 9px; (row column)
grid-auto-flow
控制
自動定位網格
(隱式網格)的元素的流動方式
grid-auto-flow: row;
(預設)
grid-auto-flow: row
dense;
(補洞)
網格元素
grid-column
指定
元素
應該放置在網格的哪些
行(column)
grid-column-start: 1;
grid-column-end: 3;
grid-column-start: span 3;
grid-column-start: 2;
grid-column-end: 4;
grid-column: 2 / 3
(從格線行2到行3)
grid-column: 2 / span 2 | (-1)
(從格線行2開始，延伸兩格)
grid-row
指定
元素
應該放置在網格的哪些
列(row)
grid-row-start: 1;
grid-row-end: 3;
grid-row-start: 2;
grid-row-end: 4;
grid-row: 1 / 3;
(從格線列1到列3)
grid-row: 1 / -1;
(從格線列1開始直到最後)
justify-self (內容|
水平
)
用於
單個
元素內容在
cell
內
水平方向
的對齊
只在 justify-items 非預設的 stretch 才有意義
justify-self: start; (靠左)
justify-self: stretch;
(預設)
align-self (內容|
垂直
)
用於
單個
元素內容在
cell
內
垂直方向
的對齊
只在 align-items 非預設的 stretch 才有意義
align-self: stretch;
(預設)