Project 4: Responsive Photo Gallery

Project 4: Responsive Photo Gallery

A centered even grid of photos that collapses nicely as the viewport shrinks.

The technique

Flexbox with wrapping + equal cards.

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

.gallery img {
  width: 240px;
  height: 160px;
  object-fit: cover;   /* crops without squashing */
  border-radius: 12px;
}

Or the grid way:

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

The responsive trick

• flex-wrap: wrap lets items flow onto new lines.
• repeat(auto-fill, minmax(240px, 1fr)) describes "fit columns of at least 240px".
• gap spaces the tracks without margin hacks.
• object-fit: cover crops images so every card is neat.

Checklist

• [ ] Photos are in a flex or grid container
• [ ] Columns shrink to fit small screens
• [ ] Each image keeps aspect ratio (object-fit)
• [ ] Consistent gap between photos

TL;DR

A gallery: flex/grid + flex-wrap/auto-fill + gap + object-fit. Balanced photos lay out themselves.