place-items: совместная настройка двух осей в Grid
Place-items объединяет align-items и justify-items. В CSS Grid оно позволяет компактно настроить положение элементов внутри их областей по двум осям.
Назначение
Place-items объединяет align-items и justify-items. В CSS Grid оно позволяет компактно настроить положение элементов внутри их областей по двум осям.
Как это работает
Первое значение относится к align-items, второе — к justify-items. Если второе пропущено, обычно используется первое. Запись center подходит для центрирования внутри ячейки с доступным свободным пространством.
Пример
<style>.place-demo{display:grid;min-height:12rem;place-items:center;border:2px dashed #8caf99;padding:1rem}.place-demo p{margin:0;max-width:22ch;background:#e5f3e9;padding:1rem}</style>
<div class="place-demo"><p>Текст расположен в центре области Grid.</p></div>Что должно получиться
Абзац располагается по центру выделенной области. При увеличении текста контейнер может вырасти благодаря min-height, а не обрезает содержимое фиксированной высотой.
Граница применения и частая ошибка
Во Flexbox часть justify-items не управляет главной осью: там обычно требуется justify-content. Центрирование не предотвращает переполнение слишком широкого содержимого. Проверяйте длинные строки и увеличенный размер шрифта отдельно.
Самостоятельная проверка
Поменяйте center на start end и определите обе оси. Уменьшите ширину окна и увеличьте текст в несколько раз. Объясните, почему у контейнера без свободного места центрирование может быть незаметным.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.