SnippetUI
← Back to snippets

Responsive CSS Grid Gallery

A fluid, responsive image gallery that dynamically adjusts its column count based on screen width using auto-fit and minmax, completely eliminating the need for media queries.

HTMLCSS

By combining display: grid with grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), you can build a highly responsive image gallery where columns automatically scale and adapt to the viewport width—without writing a single media query (@media).

Preview

Gallery image 1Gallery image 2Gallery image 3Gallery image 4Gallery image 5Gallery image 6

Use Cases & Features

  • Portfolios and Photo Galleries: Perfect for displaying a beautifully tiled masonry or grid-style collection of images.
  • E-commerce Product Listings: Highly adaptable for structured product card layouts.
  • Zero Media Queries: Leveraging auto-fit and minmax significantly streamlines the CSS, resulting in cleaner, more maintainable code.

Design & UX

  • Consistent Aspect Ratios: The pairing of aspect-ratio: 1 / 1 and object-fit: cover ensures a perfectly uniform square grid, effortlessly handling source images of varying proportions.
  • Engaging Hover Effects: Incorporates a subtle lifting animation (transform: translateY and scale) accompanied by an enhanced shadow on hover, clearly signaling interactivity to the user.
  • Refined Transitions: Utilizes cubic-bezier timing functions for exceptionally smooth, natural-feeling animation curves.

Customization Guide

  • Adjusting Minimum Width: Modifying the 200px value within minmax(200px, 1fr) alters the baseline size of each grid item. A higher value decreases the maximum number of items that can align horizontally.
  • Altering Aspect Ratios: Easily adapt the layout to fit your specific needs by changing the aspect ratio to 16 / 9 (widescreen) or 3 / 4 (portrait).

Implementation

index.html 
<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>
styles.css 
.gallery {
display: grid;
/* Automatically adjusts the number of columns to fill the container, keeping them at least 200px wide */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Maintain square aspect ratio */
aspect-ratio: 1 / 1;
/* Crop to maintain aspect ratio */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Subtle floating effect on hover */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Browser Support

  • display: grid and aspect-ratio enjoy comprehensive support across all modern browsers (Chrome, Firefox, Safari, Edge).
  • As older browsers (such as IE11) lack support for these modern CSS features, graceful degradation or fallbacks should be considered if legacy support is strictly required.