CSS свойство justify-items
Определение и применение
Свойство justify-items задаёт выравнивание элементов Grid по строчной оси внутри их собственных областей.
При горизонтальном письме строчная ось горизонтальна. Направление зависит от writing-mode и
direction; размеры дорожек при таком выравнивании не меняются.
Во Flexbox это свойство игнорируется. Для распределения элементов по главной оси используют
justify-content и автоматические внешние отступы.
stretch требует автоматического размера элемента по оси выравнивания; ограничения минимального и
максимального размера сохраняются. Автоматические margin на этой оси имеют приоритет над выравниванием.
Связанные свойства:
align-items,
justify-content.
Сравните выравнивание всех элементов внутри ячеек по горизонтали в генераторе Grid. Настройки можно проверить в превью и сохранить как HTML/CSS.
start
center
end
stretch
Попробуйте значения justify-items
Выравниваются элементы внутри своих ячеек вдоль горизонтальной оси.
justify-items: stretch
HTML и CSS примера
<div class="stage demo-target">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
justify-items: stretch;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
justify-items: start;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
justify-items: center;
}
* {
box-sizing: border-box;
}
.stage {
width: 100%;
max-width: 300px;
height: 210px;
padding: 10px;
border: 2px dashed #607589;
background: #edf2f5;
color: #172c3d;
font: 16px/1.4 system-ui;
}
.item {
padding: 10px;
border: 2px solid #245a85;
background: #b9d7eb;
}
.demo-target {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 60px);
gap: 8px;
justify-items: end;
}
Поддержка браузерами
Спецификация: CSS align
Поддерживается во всех основных браузерах с 2017 года.
Отдельные значения (1) поддерживаются не везде — смотрите таблицу.
| Возможность | Компьютеры | Мобильные | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
 Chrome |  Edge |  Firefox |  Opera |  Safari | Chrome Android | Firefox for Android | Opera Android |  Safari on iOS |  Samsung Browser |  WebView Android | WebView on iOS | |
justify-items | 52 | 12 | 20 | 12.1 | 9 | 52 | 20 | 12.1 | 9 | 6.0 | 52 | 9 |
anchor-center | 125 | 125 | 147 | 111 | 26 | 125 | 147 | 83 | 26 | 27.0 | 125 | 26 |
| В блочном контейнере | 130 | 130 | 115 | 130 | 86 | 28.0 | 130 | |||||
center | 52 | 79 | 20 | 39 | 9 | 52 | 20 | 41 | 9 | 6.0 | 52 | 9 |
| В flex-контейнере | 52 | 12 | 20 | 12.1 | 9 | 52 | 20 | 12.1 | 9 | 6.0 | 52 | 9 |
| В grid-контейнере | 57 | 16 | 45 | 44 | 10.1 | 57 | 45 | 43 | 10.3 | 6.0 | 57 | 10.3 |
left | 52 | 79 | 20 | 39 | 9 | 52 | 20 | 41 | 9 | 6.0 | 52 | 9 |
legacy | 52 | 79 | 20 | 39 | 9 | 52 | 20 | 41 | 9 | 6.0 | 52 | 9 |
right | 52 | 79 | 20 | 39 | 9 | 52 | 20 | 41 | 9 | 6.0 | 52 | 9 |
поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31
Синтаксис
justify-items: normal | stretch | baseline | first baseline | last baseline;
justify-items: [ safe | unsafe ]? [ start | end | center | self-start | self-end | flex-start | flex-end | left | right ];
justify-items: anchor-center;
justify-items: legacy | legacy && [ left | right | center ];
/* Глобальные значения */
justify-items: initial | inherit | unset | revert | revert-layer;
| разделяет варианты. ? означает необязательную часть. && требует обе
составляющие в любом порядке. Квадратные скобки группируют варианты; внутри типа задают допустимый диапазон.
JavaScript:
element.style.justifyItems = "center";Начальное значение свойства
legacy.
Значения свойства
| Значение | Описание |
|---|---|
legacy |
Начальный режим совместимости со старым HTML-выравниванием. Если подходящего унаследованного выравнивания нет,
действует как normal. Допустимы сочетания с left, right или
center.
|
normal |
В Grid обычно растягивает элемент; для элементов с собственными размерами или соотношением сторон может
действовать как start.
|
stretch |
Растягивает каждый элемент внутри его собственной области по строчной оси, если размер по этой оси автоматический. |
start / end |
У начального или конечного края по оси выравнивания с учётом направления письма. |
center |
По центру области выравнивания. |
flex-start / flex-end |
Для justify-content во Flexbox — начало или конец главной оси. В остальных рассматриваемых здесь
случаях соответствуют start / end; свойства justify-items и
justify-self во Flexbox не работают.
|
left / right |
У физического левого или правого края. Если ось выравнивания не параллельна строчной оси, действуют как
start.
|
safe / unsafe |
Модификатор перед позиционным значением. При переполнении safe center переключается к началу,
unsafe center сохраняет центрирование. Не применяется к space-*,
stretch или baseline.
|
self-start / self-end |
Выбирает край с учётом направления письма самого элемента. |
baseline / first baseline / last baseline |
Выравнивает по первой или последней базовой линии в соответствующей группе; baseline означает
first baseline.
|
anchor-center |
Центрирование относительно якоря для якорно позиционированных элементов. Это отдельный сценарий, зависящий от поддержки CSS Anchor Positioning. |
initial |
Устанавливает начальное значение свойства. |
inherit |
Наследует вычисленное значение свойства у родительского элемента. |
unset |
Для ненаследуемого свойства justify-items устанавливает его
начальное значение.
|
revert |
Отменяет заданное в коде значение свойства для этого элемента: применяются пользовательские или стандартные стили браузера. Если они не задают значение, свойство наследуется или получает начальное значение по обычным правилам. Не возвращает значение из предыдущей строки CSS. |
revert-layer |
Сбрасывает значение свойства для текущего слоя каскада @layer. Применяется значение из другого слоя
по правилам каскада; если подходящего значения нет, возможен откат к стилям пользователя или браузера.
|
Спецификация
CSS Box Alignment — спецификация justify-items.
Наследуется
Нет.
Анимируемое
Дискретно: значение переключается, а не создаёт плавное перемещение элементов.
Примеры, попробуйте сами
Выравнивание в Grid
Измените center на start, end или stretch. Выравниваются все элементы внутри своих ячеек.
base.css
* {
box-sizing: border-box;
}
body {
margin: 16px;
font:
16px/1.5 system-ui,
sans-serif;
color: #172c3d;
}
section {
margin-bottom: 24px;
min-width: 0;
}
h3 {
margin: 0 0 12px;
font-size: 16px;
}
.item {
padding: 8px;
min-width: 0;
background: #c5dbea;
border: 1px solid #35658a;
overflow-wrap: anywhere;
}
.container {
background: #eef2f5;
border: 1px dashed #8495a5;
}
index.html
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Выравнивание в Grid</title>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item target">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
style.css
.container {
display: grid;
grid-template: repeat(2, 50px) / repeat(2, 1fr);
height: 180px;
justify-items: center;
}
Тони готовит пример…