Gallery

This component is used to display multiple images, and also expanding them on click.

<div class="gallery">
	<a href="img/image.jpg" class="gallery__item">
		<img class="gallery__item__image" src="img/image.jpg">
	</a>
	<!-- ... -->
</div>

<div class="overlay overlay--closed">
	<!-- ... -->
	<div class="overlay__body">
		<img class="gallery__item__image gallery__item__image--overlay" src="img/image.jpg">
	</div>
</div>

Notes

It is advised to add an overlay that displays the clicked image.

SCSS

.gallery {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	place-items: start;
	grid-gap: 20px;
	@include media-breakpoint-down(md) {
        grid-template-columns: 1fr 1fr;
	}
	@include media-breakpoint-down(xs) {
        grid-template-columns: 1fr;
	}
	&__item {
		width: 100%;
		position: relative;
		cursor: pointer;
		&:before {
			content: '';
			display: inline-block;
			width: 1px;
			height: 0;
			padding-bottom: 100%;
		}
		&__image {
			position: absolute;
			top: 0;
			left: 0;
			object-fit: cover;
			object-position: center;
			border-radius: $default-radius;
			width: 100%;
			height: 100%;
			&--overlay {
				position: static;
				object-fit: unset;
				width: 100%;
				height: auto;
				max-width: 80em;
			}
		}
	}
}