HTML/CSS - 15

swstack < 1 min read

HTML/CSS - 15: Responsive Design (Mobile-First)

Learn how to make your websites look great on phones, tablets, and desktops using media queries.

✦ HTML Editor

▶ Live Output

👀 Show Solution

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

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

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