Есть сетка 3×3. Как расположить элемент, например логотип, в правом нижнем углу с помощью CSS Grid?

Укажите третью колонку и третью строку через grid-column: 3 и grid-row: 3, а для самого угла ячейки добавьте justify-self и align-self: end.

Короткий ответ

Что ответить на собеседовании

Укажите третью колонку и третью строку через grid-column: 3 и grid-row: 3, а для самого угла ячейки добавьте justify-self и align-self: end.

Подробный разбор

Ответ с пояснениями

Укажите третью колонку и третью строку через grid-column: 3 и grid-row: 3, а для самого угла ячейки добавьте justify-self и align-self: end.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  min-height: 300px;
}
.logo {
  grid-column: 3;
  grid-row: 3;
  justify-self: end;
  align-self: end;
}

Контейнер должен иметь пространство по высоте. При ненулевых padding и gap край ячейки не равен внешней границе контейнера; это учитывают в требуемом расположении.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее