모든 데이터는 로컬에서 처리됩니다

CSS Grid Align & Justify Demo

Visualize grid cell boundaries to clearly see how child elements position within each cell

Control Panel

Adjust four alignment properties to observe different levels of alignment effects

Align Items

Vertical alignment within cells

Justify Items

Horizontal alignment within cells

Align Content

Vertical alignment of entire grid

Justify Content

Horizontal alignment of entire grid

Current settings: align-items: center | justify-items: center | align-content: center | justify-content: center

Grid Demo Area

3x3 grid with extra container space to demonstrate content alignment effects

A

B

C

D

E

F

G

H

I

Property Explanations

Items Properties (Alignment within cells)

Align Items (Vertical)

start - Align child elements to top of cell
center - Center child elements vertically
end - Align child elements to bottom of cell
stretch - Stretch child elements to fill cell height

Justify Items (Horizontal)

start - Align child elements to left of cell
center - Center child elements horizontally
end - Align child elements to right of cell
stretch - Stretch child elements to fill cell width

Content Properties (Entire grid alignment)

Align Content (Vertical)

start - Align grid to top of container
center - Center grid vertically
end - Align grid to bottom of container
space-* - Distribute space between grid rows

Justify Content (Horizontal)

start - Align grid to left of container
center - Center grid horizontally
end - Align grid to right of container
space-* - Distribute space between grid columns

관련 도구

CSS Flexbox 배우기

시각적 데모가 포함된 인터랙티브 CSS Flexbox 학습 도구

CSS Grid 배우기

시각적 데모가 포함된 인터랙티브 CSS Grid 학습 도구

All Tools →

Explore all tools