Grid Container

In a grid container, grid-template-columns lets you set column sizes. The fr unit divides up the available space as fractions. For responsive grids, repeat(), auto-fit, minmax() are incredibly useful.

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

.card {
  padding: 20px;
  border-radius: 16px;
}

On a wide screen, you'll get many card columns. On a narrow screen, they'll auto-stack. You'll end up with a responsive grid without writing a single media query.