Responsive CSS Grid

Responsive CSS Grid — a practical guide to responsive CSS Grid with clear examples you can reuse in real projects.

CSS Tutorial Series (71/109). Prefer one article? Read the complete CSS tutorial.

Short description

Often fewer media queries are needed with fluid track recipes.

Auto-fit recipe

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