Галерея изображений — частый компонент на сайтах портфолио, фотографов, магазинов одежды или интерьеров, и хорошая новость в том, что базовую версию такой галереи вполне можно сделать без единой строчки JavaScript, полагаясь только на возможности современного CSS.
Сетку из изображений разной или одинаковой пропорции удобно строить на CSS Grid с auto-fit и minmax — это позволяет галерее самой подстраивать количество колонок под ширину экрана, от одной колонки на узком телефоне до нескольких на широком мониторе, без отдельных медиазапросов под каждый случай.
Для изображений с разным исходным соотношением сторон object-fit со значением cover обеспечивает единообразный внешний вид ячеек галереи — каждое изображение обрезается под заданные пропорции ячейки, сохраняя пропорции самого кадра, вместо того чтобы искажаться под чужой формат.
Увеличенный просмотр изображения по клику — то, что обычно ассоциируется с JavaScript, но базовый вариант такого поведения можно реализовать и чисто на CSS через связку скрытого чекбокса или радиокнопки с псевдоклассом checked, хотя для более сложной галереи с навигацией между фотографиями скрипт обычно всё же удобнее.
Лёгкая анимация при наведении — увеличение изображения внутри ячейки без изменения размера самой ячейки, через overflow hidden на контейнере и transform scale на самом изображении — распространённый приём, который добавляет галерее ощущения интерактивности без лишней сложности.
Для действительно больших галерей стоит подумать про ленивую загрузку изображений через атрибут loading, чтобы не заставлять браузер загружать сразу сотни фотографий, если посетитель, возможно, просмотрит только первый ряд и закроет страницу.
Примеры CSS-галерей с разбором кода можно найти в подборках на CSS-Tricks, одном из известных ресурсов о практическом применении CSS.
