Design Atlas
한국어
▦ Layout

Container queries

컨테이너 쿼리

CSS that reacts to the size of an element's own container — not the viewport. The same card can lay itself out differently depending on where it's placed.

Also known as: @containerComponent-level responsiveness
···
html
<div class="box" id="box">
  <div class="card">
    <div class="thumb"></div>
    <div class="text"><i class="ln l1"></i><i class="ln l2"></i></div>
  </div>
</div>
css
.box{width:200px;max-width:92%;height:min(78%,220px);border:2px dashed var(--muted);border-radius:10px;
  padding:10px;container-type:inline-size;transition:width 2.4s cubic-bezier(.4,0,.2,1);overflow:hidden}
.card{height:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;flex-direction:column}
.thumb{flex:1;background:linear-gradient(135deg,var(--accent),var(--accent-3));min-height:40%}
.text{padding:10px;display:flex;flex-direction:column;gap:8px;justify-content:center}
.ln{display:block;height:8px;border-radius:3px;background:var(--line)}
.l1{width:70%}.l2{width:46%}
@container (min-width: 340px){
  .card{flex-direction:row}
  .thumb{min-height:100%;width:42%}
  .text{flex:1}
}
js
const box = document.getElementById('box');
box.style.width = '200px';
let wide = false;
function toggle() {
  wide = !wide;
  box.style.width = wide ? '460px' : '200px';
  setTimeout(toggle, 2600);
}
setTimeout(toggle, 2200);

@media only looks at the browser window. So the same card component gets identical styles whether it sits in a wide main area or a narrow sidebar, and it can visually break in the tight spot. @container instead styles based on how many pixels wide the box the card is actually sitting in really is.

Using it takes two steps: give the parent container-type: inline-size to declare "this is a query target," then in the child write @container (min-width: 400px) { … } against that container's width.

Because it makes true component-level responsiveness possible, it's often called one of the most practical additions to recent CSS. All major browsers supported it by 2023, so it's safe to use in production today.

When to use

Essential when a reusable card or widget has to sit in spots of different widths — main area, sidebar, modal. For whole-page layout switches, plain media queries are still simpler.