Адаптивная галерея на CSS Grid

Сочетание display: grid и grid-template-columns: repeat(auto-fit, minmax(..., 1fr)) позволяет создать адаптивную галерею изображений, где количество колонок автоматически меняется в зависимости от ширины экрана, и всё это совершенно без медиазапросов (@media).

Предпросмотр (Preview)

Сценарии использования и особенности (Use Cases & Features)

• Портфолио и фотогалереи: Идеально подходит, когда нужно красиво расположить изображения сеткой.
• Списки товаров в интернет-магазинах: Также можно применять для раскладки карточек товаров.
• Без медиазапросов: Использование auto-fit и minmax делает код очень простым и улучшает его поддержку.

Дизайн и UX (Design & UX)

• Фиксированное соотношение сторон: Комбинация aspect-ratio: 1 / 1 и object-fit: cover гарантирует, что изображения всегда будут красивыми квадратами в единой сетке, даже если оригиналы имеют разные пропорции.
• Эффект при наведении: При наведении курсора на изображение добавляется анимация легкого поднятия (transform: translateY и scale) и усиление тени, что интуитивно дает пользователю понять, что элемент интерактивен.
• Плавные переходы: Использование cubic-bezier обеспечивает естественную и плавную кривую анимации.

Руководство по настройке (Customization Guide)

• Изменение минимальной ширины: Изменив значение 200px в minmax(200px, 1fr), можно отрегулировать минимальный размер одного элемента. Чем больше значение, тем меньше максимальное количество колонок в ряду.
• Изменение соотношения сторон: Изменив на 16 / 9 (горизонтальное) или 3 / 4 (вертикальное), можно адаптировать макет под ваши нужды.

Код реализации (Implementation)

<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>

.gallery {
display: grid;
/* Автоматически настраивает количество колонок для заполнения контейнера, не опускаясь ниже 200px */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Всегда сохраняет квадратную форму */
aspect-ratio: 1 / 1;
/* Обрезка изображения для сохранения пропорций */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Эффект легкого поднятия при наведении */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Поддержка браузерами (Browser Support)

• display: grid и aspect-ratio поддерживаются всеми современными браузерами (Chrome, Firefox, Safari, Edge).
• В старых браузерах (например, IE11) не поддерживается, при необходимости рассмотрите использование фолбэков (fallbacks).