Responsive Design

the intro

Responsive design means one website that adapts to every screen size. You write styles for small screens first, then add media queries as the screen grows. Combined with fluid units and flexible images, the same code works everywhere.

the sample

phone first, then grow

.cards {
  display: grid;
  gap: 16px;
}
@media (min-width: 768px) {
  .cards { grid-template-columns: 1fr 1fr; }
}

the docs