Коротко: галерею делают сеткой из изображений: контейнеру задают display: grid с repeat(auto-fit, minmax(200px, 1fr)), картинкам — object-fit: cover и aspect-ratio. Эффект при наведении добавляют через transform и transition.
Разметка и сетка
<div class="gallery">
<a href="big.jpg"><img src="thumb.jpg" alt=""></a>
<a href="big2.jpg"><img src="thumb2.jpg" alt=""></a>
</div>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}Сетка сама подбирает число колонок под ширину экрана — медиазапросы не нужны.
Вкладки: оформление
.gallery img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
display: block;
border-radius: 10px;
}Одинаковые пропорции и object-fit: cover дают ровную сетку, даже если исходные фото разного размера.
.gallery a { overflow: hidden; border-radius: 10px; }
.gallery img { transition: transform .3s; }
.gallery a:hover img { transform: scale(1.05); }Плавное увеличение при наведении оживляет галерею. Обрезку обеспечивает overflow: hidden у ссылки-обёртки.
.gallery {
column-count: 3;
column-gap: 12px;
}
.gallery img { margin-bottom: 12px; }Для картинок разной высоты удобна «кладка» на колонках. На мобильном число колонок уменьшают.
loading="lazy", чтобы картинки грузились по мере прокрутки.Практика: собрать галерею
- Разместите изображения в контейнере.
- Задайте сетку через
grid. - Установите одинаковые пропорции и
object-fit. - Скруглите углы и добавьте отступы.
- Настройте эффект при наведении.
- Включите ленивую загрузку и проверьте на мобильном.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинки разной высоты | нет aspect-ratio |
задать пропорции |
| Фото искажены | нет object-fit |
cover |
| Увеличение выходит за карточку | нет overflow: hidden |
добавить обёртке |
| Галерея тормозит | большие файлы | сжать и включить lazy |
| Прыгает сетка при загрузке | нет размеров | задать aspect-ratio |
Проверьте себя
Вопросы и ответы
Потому что заданы и ширина, и высота без object-fit. Добавьте object-fit: cover — изображение заполнит рамку с обрезкой без искажений.
Ссылку-обёртку ведут на большую картинку: браузер откроет её поверх страницы. Полноценный лайтбокс с навигацией делают на JavaScript или готовой библиотекой.
С auto-fit и minmax обычно нет: сетка сама перестраивается. Медиазапрос понадобится, если хотите принудительно менять число колонок.
Сжать изображения, использовать уменьшенные версии, включить loading="lazy" и современные форматы вроде WebP. Большие файлы — главная причина медленной галереи.
Итоги
- Галерею собирают сеткой на
grid. - Одинаковые пропорции и
object-fitдают ровный вид. - Эффект при наведении делают через
transform. - Для картинок важна оптимизация и ленивая загрузка.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.