CSS Image Gallery

CSS Image Gallery: Responsive Grids with Zero Media Queries

A modern CSS image gallery adapts automatically from one column on smartphones to three or four columns on wide monitors—without writing dozens of breakpoints or JavaScript masonry scripts. Combining CSS Grid's auto-fit function with aspect-ratio and object-fit: cover keeps every thumbnail crisp and uniformly framed.

Auto-Fitting Gallery Grid

The grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); rule instructs the browser to fit as many 220px+ columns as space allows and stretch remaining space evenly. Applying aspect-ratio: 4 / 3; and object-fit: cover; prevents tall portrait photos from breaking row alignment.

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.gallery-card {
    margin: 0;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #ffffff;
}

.gallery-card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.gallery-card:hover img {
    transform: scale(1.04);
}

.gallery-card figcaption {
    padding: 10px 12px;
    font-size: 0.9rem;
    color: #334155;
}

Preventing Overflow on Small Phones

If your minimum column size is minmax(220px, 1fr), a 320px phone still fits comfortably. However, if you set minmax(360px, 1fr), write minmax(min(360px, 100%), 1fr) so ultra-narrow viewports shrink cleanly down to 100% without overflowing.

Common Mistakes to Avoid

• Setting fixed width and height on gallery images without object-fit: cover: Squishing a wide photo into a square box distorts faces and logos horribly.
• Scaling the whole .gallery-card on hover when nearby cards overlap: Apply transform: scale(1.04) strictly to the img inside an overflow: hidden card frame.
• Omitting figcaption or alt descriptions: Use semantic figure and figcaption tags for accessible captions.

Frequently Asked Questions

What is the difference between auto-fit and auto-fill in CSS Grid?

When a row has extra space with only two cards, auto-fit collapses empty tracks so the two cards stretch across the row, whereas auto-fill keeps empty track columns reserved.

How do I keep portrait photo faces from getting cropped at the top?

Add object-position: top center; alongside object-fit: cover; on portrait thumbnails.