Размещение элементов по обеим осям

Классы items-* задают place-items — align-items и justify-items одним значением: где каждый элемент стоит в своей ячейке сетки. Берите items-center, чтобы поставить содержимое ячеек в центр.

Пример

Значения

Сетка из трёх колонок заданной высоты. Подпись над образцом — класс контейнера.

HTML

<div class="grid grid-col-1 sm:grid-col-2 gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">items-start</code>
    <div class="grid grid-col-3 items-start gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">items-center</code>
    <div class="grid grid-col-3 items-center gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">items-end</code>
    <div class="grid grid-col-3 items-end gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">items-stretch</code>
    <div class="grid grid-col-3 items-stretch gap-1 h-e8 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="p-1 bg-tertiary-container color-on-tertiary-container radius-ui">2</span>
      <span class="p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
    </div>
  </div>
</div>

Классы

Класс	CSS	Значения
`items-start`	`align-items: start; justify-items: start; place-items: start`	—
`items-end`	`align-items: end; justify-items: end; place-items: end`	—
`items-center`	`align-items: center; justify-items: center; place-items: center`	—
`items-stretch`	`align-items: stretch; justify-items: stretch; place-items: stretch`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:items-start.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Как выбрать

items-start, items-center, items-end — элементы своего размера у начала, в центре или у конца ячейки по обеим осям.
items-stretch — элементы на всю ячейку; значение по умолчанию у сетки.

Значки в центре ячеек

HTML

<div class="grid grid-col-4 auto-rows-fr items-center gap-1">
  <img src="1.svg" alt="Первый">
  <img src="2.svg" alt="Второй">
  <img src="3.svg" alt="Третий">
  <img src="4.svg" alt="Четвёртый">
</div>

По одной оси выравнивают классы items-cross-* и items-main-*.

Ограничения

Во флекс-контейнере действует только вертикальная часть: flex items-center выравнивает элементы по поперечной оси, как items-cross-center. По основной оси элементы располагают классы justify-*.

Навигация

Главное

Документация

Содержание