SS Тулбокс
Все данные обрабатываются локально

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

Vertical alignment within cells

Horizontal alignment within cells

Vertical alignment of entire grid

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