中文
devexamples

CSS Grid Auto-Fit Image Gallery

Build a responsive gallery with repeat(auto-fit, minmax()) that never overflows, keeps captions aligned, and falls back gracefully.

CssData Fetching

Code

snippet
/* Markup contract:
   <ul class="gallery">
     <li class="gallery__item">
       <img src="/cabin.jpg" alt="Cabin at dusk">
       <h3>Cabin at dusk</h3>
       <p>Two-night stay near the lake.</p>
     </li>
   </ul> */

.gallery {
  --gallery-min: 14rem;
  --gallery-gap: clamp(0.75rem, 2vw, 1.5rem);

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--gallery-min)), 1fr));
  gap: var(--gallery-gap);
  align-items: start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gallery__item {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--space-2, 0.5rem);
  min-inline-size: 0;
  padding: var(--space-3, 1rem);
  border: 1px solid var(--color-border, #d4d4d8);
  border-radius: var(--radius-md, 0.5rem);
  background: var(--color-surface, #ffffff);
}

.gallery__item img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: calc(var(--radius-md, 0.5rem) - 0.125rem);
}

.gallery__item h3 {
  margin: 0;
  font-size: 1.05rem;
  text-wrap: balance;
}

.gallery__item p {
  margin: 0;
  color: var(--color-text-muted, #52525b);
  text-wrap: pretty;
}

/* Keep every card the same height when captions wrap to different lines. */
@supports (grid-template-rows: subgrid) {
  .gallery__item {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
}

Related Examples