Container queries in CSS

Styling a component by the space it is given, not by the viewport.

.card-host {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 0.75rem;
}

@container card (width >= 28rem) {
  .card {
    grid-template-columns: 8rem 1fr;
    align-items: start;
  }
}

How it works

1. container-type: inline-size makes an element queryable.
2. @container then asks about that element's width.
3. The same card can be narrow in a sidebar and wide in main.

Keywords and builtins used here

• card
• container
• display
• gap
• grid
• rem

The run, in numbers

Lines

16

Characters to type

206

Tokens

53

Three-star pace

85 tpm

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

Type this snippet

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

← Previous Next →