所有数据均在本地处理

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 学习工具，提供可视化演示

学习 CSS Grid

交互式 CSS Grid 学习工具，提供可视化演示

All Tools →

Explore all tools