# 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.

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

Level: Freelancer · [More CSS terms at this level](https://www.ask-codey.com/glossary/subjects/css/freelancer)

Updated: September 27, 2026

Source: https://www.ask-codey.com/glossary/container-query