
Back to Top button with smooth scroll
July 29, 2024
Animated Gradient Background
July 30, 2024
This snippet has a clean and simple gallery with images of different sizes, all in 3:2 aspect ratio
HTML for Gallery
<div class="sf-gallery">
<a href="#"><img src="https://images.unsplash.com/photo-1658815365798-2b0a2587c721?w=900" alt="Image 1"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1721763604562-4342b0fc6c3a?w=900" alt="Image 2"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1721736739449-2ca6b81b1ae4?w=900"" alt="Image 3"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1721745168729-0c6b247007a1?w=900" alt="Image 4"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1721397117606-23a077736e7e?w=900" alt="Image 5"></a>
<a href="#"><img src="https://images.unsplash.com/photo-1721552491851-8ee580e794bb?w=900" alt="Image 6"></a>
</div>
CSS
/* ---------------------------------------------------------- */
/* Snippflow Gallery */
/* ---------------------------------------------------------- */
.sf-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.sf-gallery a {
line-height: 0;
}
.sf-gallery img {
width: 100%;
height: auto;
object-fit: cover;
object-position: center;
aspect-ratio: 3 / 2;
background-color: #ececec;
border-radius: 3px;
}
@media only screen and (max-width: 767px) {
.sf-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
Result:
See the Pen Gallery with varied image sizes using aspect-ratio and object-fit by Snippflow (@snippflow) on CodePen.