Back to Top button with smooth scroll
Back to Top button with smooth scroll
July 29, 2024
Animated Gradient Background
Animated Gradient Background
July 30, 2024

July 29, 2024

Gallery with varied image sizes using aspect-ratio and object-fit

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Level Up Your Coding Skills

Get the best CSS, HTML, and JS snippets delivered to your inbox monthly. 🚀
No spam—just coding gold! 💻✨"

We don’t spam! Read our privacy policy for more info.

cookie
This website uses cookies to improve your experience. By using this website you agree to our Data Protection Policy.
Read more