NibCSS

Container queries

Components that adapt to the space they are given, not to the viewport.

1 min readv1

A card in a narrow sidebar and the same card in a wide main column should look different — the viewport is the same, the container is not.

1. Declare the container with nib#

HTML
<div nib="ctnt=inline-size; ctnn=card">
  <article class="card">…</article>
</div>

2. Write the query in CSS#

CSS
.card { display: grid; gap: 12px; }
@container card (min-width: 420px) {
  .card { grid-template-columns: 140px 1fr; }
}

Container units in nib values#

Size text and spacing relative to the container, with no query at all:

HTML
<h3 nib="fts=clamp(16px, 5cqi, 28px)">Scales with its container</h3>

Next steps#