Container query

Styles an element based on its container's size, not the screen's.

What is a container query?

A container query styles an element based on the size of its container rather than the whole screen, so a card can adapt wherever it is placed.

.card-list { container-type: inline-size; }
@container (min-width: 400px) {
  .card { display: flex; }
}

Level: Freelancer · More CSS terms at this level

Updated