Media queries in CSS

Breakpoints that adapt a layout, written mobile first.

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (width >= 48rem) {
  .layout {
    grid-template-columns: 16rem 1fr;
    gap: 1.5rem;
  }
}

@media print {
  .site-header,
  .toast {
    display: none;
  }
}

How it works

1. min-width queries add rules as the screen grows.
2. A range syntax like (width >= 48rem) reads more clearly.
3. Group the query around the rules it changes, not the whole sheet.

Keywords and builtins used here

• display
• gap
• grid
• layout
• media
• rem
• toast

The run, in numbers

Lines

19

Characters to type

211

Tokens

60

Three-star pace

85 tpm

At the three-star pace of 85 tokens a minute, this run takes about 42 seconds.

Type this snippet

Step 1 of 4 in Responsive, step 1 of 21 in Responsive & modern CSS.

Next →