justify-items: выравнивание содержимого ячеек Grid
Justify-items задаёт выравнивание элементов сетки по строчной оси внутри их областей. Оно помогает управлять свободным местом в ячейках, не меняя расположение самих колонок.
Назначение
Justify-items задаёт выравнивание элементов сетки по строчной оси внутри их областей. Оно помогает управлять свободным местом в ячейках, не меняя расположение самих колонок.
Как это работает
В обычном горизонтальном письме start, center и end соответствуют началу, центру и концу строчной оси. Stretch растягивает подходящие элементы. Индивидуальное исключение можно задать через justify-self.
Пример
<style>.items-demo{display:grid;grid-template-columns:repeat(2,1fr);justify-items:start;gap:.6rem;background:#eef3ef;padding:1rem}.items-demo>span{padding:.6rem;background:#c7e8d3}.items-demo .end{justify-self:end}</style>
<div class="items-demo"><span>HTML</span><span>CSS</span><span>JavaScript</span><span class="end">Справа</span></div>Что должно получиться
Элементы занимают ширину своего содержимого и выравниваются у начала ячеек. Последний получает отдельное правило и перемещается к концу своей области.
Граница применения и частая ошибка
Justify-items не является способом выравнивания flex-элементов. Не путайте его с justify-content, которое управляет распределением сетки в контейнере. Направление оси зависит от режима письма и направления текста.
Самостоятельная проверка
Сравните start, center и stretch. Затем задайте dir="rtl" контейнеру и объясните изменение start. Увеличьте одно слово и проверьте, что проблема длинного содержимого решается отдельно от выравнивания.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.