Grid: галерея изображений

Grid-галерея — адаптивная сетка изображений с одинаковыми или разноразмерными ячейками, управляемая через grid-template-columns и span.

Зачем нужно

CSS Grid — лучший инструмент для галерей: auto-fill с minmax создаёт адаптивную сетку без медиазапросов, span позволяет выделить акцентные изображения, aspect-ratio + object-fit: cover обеспечивает одинаковые пропорции без cropping в HTML.

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

  • Фото-портфолио
  • Страница товаров
  • Instagram-подобная лента
  • Страница команды/авторов
  • Медиа-библиотека CMS

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

Базовая адаптивная галерея

.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;
  display: block;
  transition: transform 0.3s ease;
}

.gallery__item:hover img {
  transform: scale(1.05);
}

Masonry-подобная (неодинаковые размеры)

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

.gallery-masonry__item { overflow: hidden; }
.gallery-masonry__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Выделенные элементы */
.gallery-masonry__item--wide { grid-column: span 2; }
.gallery-masonry__item--tall { grid-row: span 2; }
.gallery-masonry__item--featured {
  grid-column: span 2;
  grid-row: span 2;
}

<div class="gallery-masonry">
  <div class="gallery-masonry__item gallery-masonry__item--featured">
    <img src="..." alt="...">
  </div>
  <div class="gallery-masonry__item"><img src="..." alt="..."></div>
  <div class="gallery-masonry__item gallery-masonry__item--tall">
    <img src="..." alt="...">
  </div>
  <!-- ... -->
</div>

С оверлеем и подписью

.gallery-card {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.gallery-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: white;
}

.gallery-card:hover img { transform: scale(1.08); }
.gallery-card:hover .gallery-card__overlay { opacity: 1; }

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

  • aspect-ratio без overflow: hidden — изображение может выйти за пределы ячейки при object-fit: cover
  • minmax(200px, 1fr) — последняя строка — если элементов меньше чем колонок, последние растягиваются; justify-items: start фиксирует
  • grid-auto-rows фиксированная высота — при разном контенте ячейки будут либо обрезаны либо с пустым пространством; используйте min-content или auto

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

Ресурсы