MP Web Studio
CSSДоступно 100 из 100
69 / 100

УРОК 69 ИЗ 100

Центрируйте элементы в Grid-ячейках

Выровняйте все элементы по строчной и блочной осям ячеек.

Официальный источникW3C CSS Box Alignment — justify-items and align-itemsПроверено: 2026-08-26
ШАГ 1 · ИЗУЧИТЕ

Как это работает

justify-items задаёт выравнивание элементов по строчной оси, а align-items — по блочной. Значение center центрирует каждый элемент в доступной области.

Правильный пример
.icons { display: grid; justify-items: center; align-items: center; }

Каждый элемент центрирован по горизонтали и вертикали в своей ячейке.

Частая ошибка
.icons { display: grid; justify-content: center; }

justify-content выравнивает сетку целиком при наличии свободного места; оно не задаёт выравнивание каждого элемента в ячейке.

ШАГ 2 · ПРИМЕНИТЕ

Ваше задание

Включите Grid и центрируйте элементы через justify-items и align-items.

ШАГ 3 · СОЗДАЙТЕ

Напишите и посмотрите результат

index.htmlCSS
Безопасный результатизолировано
Черновик хранится только в этом браузере.HTML и CSS разрешены · скрипты и сеть заблокированы
ШАГ 4 · ПРОВЕРЬТЕ

Что должно пройти

0%не проверено
  • Группа использует Grid.
  • Элементы центрированы по строчной оси.
  • Элементы центрированы по блочной оси.
  • Целевой элемент присутствует на странице.
Объясните логику решения

Два свойства управляют стандартным выравниванием Grid-потомков по перпендикулярным осям.