所有資料均在本機處理

CSS Grid Align & Justify 演示

透過視覺化的格子邊界，清楚地看到子元素在每個格子中的位置變化

控制面板

調整四種對齊屬性，觀察不同層級的對齊效果

Align Items

單元格內垂直對齊

Justify Items

單元格內水平對齊

Align Content

整個網格垂直對齊

Justify Content

整個網格水平對齊

當前設定: align-items: center | justify-items: center | align-content: center | justify-content: center

Grid 演示區域

3x3 網格，外層容器有額外空間以展示 content 對齊效果

A

B

C

D

E

F

G

H

I

屬性說明

Items 屬性 (單元格內對齊)

Align Items (垂直)

start - 子元素對齊到格子頂部
center - 子元素垂直居中
end - 子元素對齊到格子底部
stretch - 子元素拉伸填滿格子高度

Justify Items (水平)

start - 子元素對齊到格子左側
center - 子元素水平居中
end - 子元素對齊到格子右側
stretch - 子元素拉伸填滿格子寬度

Content 屬性 (整個網格對齊)

Align Content (垂直)

start - 網格對齊到容器頂部
center - 網格垂直居中
end - 網格對齊到容器底部
space-* - 網格行之間分佈空間

Justify Content (水平)

start - 網格對齊到容器左側
center - 網格水平居中
end - 網格對齊到容器右側
space-* - 網格列之間分佈空間

相關工具

學習 CSS Flexbox

互動式 CSS Flexbox 學習工具，包含視覺化演示

JavaScript 主執行緒阻塞演示

瞭解 JavaScript 執行如何阻塞主執行緒並影響動畫

All Tools →

Explore all tools

MindElixir