Responsive Design

Responsive web design is an approach where a web page adapts its layout to the screen it is viewed on, from phones to large monitors, instead of having separate mobile and desktop sites.

It uses flexible layouts (CSS Flexbox and Grid), relative sizes, images that scale, and CSS media queries that change styles at certain screen widths. A viewport meta tag tells mobile browsers to use the device width. Responsive sites are easier to maintain and are preferred by search engines.

<meta name="viewport" content="width=device-width, initial-scale=1">

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