Asking about the container in CSS

A component that sizes itself to its slot, not to the window it happens to be in.

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

.card {
  display: grid;
  gap: 0.5rem;
  font-size: clamp(0.875rem, 3cqi, 1.125rem);
}

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

@container card (width < 20rem) {
  .card .meta { display: none; }
}

How it works

1. container-type: inline-size lets children query the width.
2. container-name matters once containers nest inside each other.
3. cqi is one percent of the container's inline size, like vw for a box.

Keywords and builtins used here

• card
• clamp
• container
• display
• gap
• grid
• meta
• rem

The run, in numbers

Lines

18

Characters to type

318

Tokens

87

Three-star pace

85 tpm

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

Type this snippet

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

← Previous Next →