Sandro Turriate

Coder, cook, explorer

Responsive CSS grid with fixed width items

Oct 3, 2020

How to create a responsive CSS grid with fixed-width grid items.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
#cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(25rem, 25rem));
  gap: 1rem;
  justify-content: center;
}

#cards .card {
  min-height: 10rem;
}

Wide screen

cards stretch on a wide screen

Medium screen

A new row appears on a medium screen

Small screen

cards stack on a small screen