Grid и aspect-ratio

aspect-ratio в Grid-ячейках позволяет создавать элементы с фиксированными пропорциями (16:9, 1:1, 4:3) без padding-хаков, автоматически адаптируясь к размеру колонки.

Зачем нужно

До aspect-ratio для сохранения пропорций использовался хак с padding-top: 56.25% — нечитаемый и неудобный. Свойство aspect-ratio — чистое декларативное решение, которое особенно мощно в комбинации с Grid: ширина ячейки задаётся Grid, высота автоматически вычисляется из пропорции.

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

  • Галереи изображений с одинаковыми пропорциями
  • Видео-превью (16:9)
  • Аватары и карточки пользователей (1:1)
  • Карточки товаров с изображением
  • Плейсхолдеры при загрузке (skeleton)

Основной контент

Базовое использование

/* aspect-ratio задаёт соотношение width : height */
.card-image {
  aspect-ratio: 16 / 9;  /* Видео */
  aspect-ratio: 4 / 3;   /* Классическое фото */
  aspect-ratio: 1;        /* Квадрат = 1/1 */
  aspect-ratio: 3 / 4;   /* Портрет */
}

В Grid-галерее

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.gallery__item {
  aspect-ratio: 1; /* Квадратные ячейки */
  overflow: hidden;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Не искажает изображение */
}

Видео-сетка

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.video-thumb {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: #000;
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb__duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.75rem;
}

Разные пропорции акцентных ячеек

.masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.masonry-grid__item {
  aspect-ratio: 1;
  overflow: hidden;
}

/* Горизонтальный акцент */
.masonry-grid__item--wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;
}

/* Вертикальный акцент */
.masonry-grid__item--tall {
  grid-row: span 2;
  aspect-ratio: 1 / 2;
}

Fallback для старых браузеров

.card-image {
  /* Старый хак — fallback */
  position: relative;
  padding-top: 56.25%; /* 9/16 * 100% */
}

/* Поверх — новый способ */
@supports (aspect-ratio: 16/9) {
  .card-image {
    aspect-ratio: 16 / 9;
    padding-top: 0;
  }
}

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

  • aspect-ratio без overflow: hidden — содержимое (особенно изображения) может выйти за пределы при object-fit: cover
  • aspect-ratio + явная height — если задана height, aspect-ratio игнорируется; не указывайте оба
  • Поддержка браузеров — Chrome 88+, Firefox 89+, Safari 15+; для Safari 14 нужен fallback

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

Ресурсы