Layout and responsiveness · Lesson 12 of 17
Container-based responsiveness
A card adapting to its available space.
8 minutes1 games
A media query observes the viewport; a container query observes a container. Set container-type:inline-size on an ancestor and use @container to adapt descendants to its width. Start with a usable base layout that works without the query.
HTML
<style>
.wrapper {container-type:inline-size;resize:horizontal;overflow:auto;width:300px;max-width:100%;border:1px solid;padding:8px;}
.card {display:grid;gap:12px;}
.card > div {background:#e0f2fe;padding:16px;}
@container (min-width:400px) {.card {grid-template-columns:1fr 2fr;}}
</style>
<div class="wrapper"><div class="card"><div>Image</div><div>Resize the wrapper from its corner.</div></div></div>| Tool | Use |
|---|---|
| Viewport size |
| Ancestor container size |
Exercise
Make .wrapper an inline-size query container and .card a grid.
HTML
<style></style><div class="wrapper"><div class="card">Card</div></div>
Learn more from
Played 0 of 1 games
Sign in to save your progress and earn XP.