Укажите третью колонку и третью строку через grid-column: 3 и grid-row: 3, а для самого угла ячейки добавьте justify-self и align-self: end.
Есть сетка 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 {
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 край ячейки не равен внешней границе контейнера; это учитывают в требуемом расположении.