justify-items
Выравнивает элементы сетки по горизонтали внутри их ячеек.
Синтаксис
justify-items: value;Значения
| Параметр | Тип | Описание |
|---|---|---|
| stretch | keyword | Растягиваются на всю ячейку (по умолчанию). |
| start | center | end | keyword | В начале, по центру или в конце ячейки. |
Примеры
Элементы в начале и по центру своих ячеек:
<style>
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: whitesmoke; }
.grid div { padding: 6px; background: lightcoral; }
</style>
<div class="grid" style="justify-items: start;"><div>start</div><div>start</div></div>
<p></p>
<div class="grid" style="justify-items: center;"><div>center</div><div>center</div></div>Примечания
justify-items задаётся grid-контейнеру; justify-self перекрывает его для одного элемента. Flexbox это свойство игнорирует.
См. также
- place-items — Задаёт `align-items` и `justify-items` сразу.
- align-self — Выравнивает один элемент поперёк главной оси, перекрывая `align-items` контейнера.
- align-items — Выравнивает элементы поперёк главной оси — в ряду это по вертикали.
В учебнике
- Grid — Сетка CSS Grid — колонки и строки, единица fr, функции repeat и minmax, промежутки и адаптивная сетка без медиазапросов.