justify-self и align-self

justify-self и align-self — свойства отдельного Grid-элемента, которые переопределяют выравнивание, заданное контейнером через justify-items / align-items, для конкретного элемента.

Зачем нужно

Иногда в сетке нужно выровнять один элемент иначе, чем все остальные — например, кнопку прижать вправо в карточке, где остальное содержимое по центру. Эти свойства дают точечный контроль без изменения правил всего контейнера.

Где используется

  • Прижатие кнопки «Подробнее» к низу карточки (align-self: end)
  • Растягивание отдельного элемента на всю высоту строки (align-self: stretch)
  • Центрирование логотипа в ячейке при общем align-items: start
  • Flex-элемент, выровненный иначе остальных (align-self)

justify-self

Выравнивает элемент по горизонтальной оси внутри его ячейки.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: start; /* все элементы слева */
}

.special {
  justify-self: end; /* этот — справа */
}

align-self

Выравнивает элемент по вертикальной оси внутри строки.

.grid {
  display: grid;
  grid-template-rows: 200px;
  align-items: stretch; /* все тянутся на 200px */
}

.badge {
  align-self: start; /* этот — только по высоте контента */
}

Применение в Flexbox

В flex-контейнере align-self работает по поперечной оси и переопределяет align-items контейнера:

.flex {
  display: flex;
  align-items: center;
}

.flex .bottom {
  align-self: flex-end; /* прижать к низу */
}

В Flexbox justify-self не работает — используйте margin-left: auto для аналогичного эффекта.

Пример: карточка с кнопкой внизу

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 16px;
  align-items: start;
}

.card__btn {
  align-self: end;
  margin-top: auto;
}

<div class="cards">
  <div class="card">
    <p>Текст карточки разной длины...</p>
    <button class="card__btn">Читать</button>
  </div>
</div>

Частые ошибки

  1. justify-self в Flexbox — не работает; в flex для сдвига одного элемента используйте margin: auto.
  2. Путаница с align-content — align-self двигает элемент внутри строки; align-content двигает строки внутри контейнера.
  3. Нет эффекта без заданного размера ячейки — если строка не имеет фиксированной высоты, align-self может визуально ничего не менять.

Связанные темы

Ресурсы