CSS Public

Responsive CSS Grid Gallery

A responsive gallery layout using CSS grid and auto-fit.

#css #grid #responsive #gallery

CSS

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

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem;
}

Notes

auto-fit + minmax is a great pattern for responsive cards and galleries.

Snippet actions

CodShot user

Updated: 2026-06-03 14:05

Public snippets

Forks