Container queries: componenten die zich aanpassen aan hun ruimte

Met container queries laat je een component reageren op de breedte van zijn eigen container in plaats van op de breedte van het scherm. Een kaart kan zo smal en gestapeld zijn in een zijbalk, en breed met afbeelding naast tekst in de hoofdkolom, met precies dezelfde CSS. Alle grote browsers ondersteunen container queries op basis van grootte inmiddels, dus je kunt ze vandaag gebruiken.

In dit artikel lees je hoe container queries werken, wanneer je ze inzet in plaats van media queries, en welke valkuilen je moet kennen.

Het probleem met media queries

Media queries zijn gebouwd rond het viewport: “als het scherm breder is dan 768 pixels, doe dan dit”. Dat werkt prima voor de grote lijnen van een layout. Maar componenten weten niet waar ze terechtkomen. Dezelfde productkaart kan in een grid van vier kolommen staan, in een zijbalk of in een brede uitgelichte sectie. Op een breed scherm is de kaart in die zijbalk nog steeds smal, maar de media query denkt dat er ruimte genoeg is.

De oplossing was jarenlang: extra modifier-classes, varianten per plek of JavaScript dat de breedte meet. Allemaal omwegen. Container queries lossen dit op in CSS zelf.

Zo werken container queries

Het werkt in twee stappen. Eerst maak je van een element een container. Daarna schrijf je regels voor de kinderen van die container op basis van zijn afmetingen.

.card-wrapper {
  container-type: inline-size;
  container-name: card;
}

.card {
  display: grid;
  gap: 1rem;
}

@container card (min-width: 28rem) {
  .card {
    grid-template-columns: 12rem 1fr;
  }
}

Wat hier gebeurt:

• container-type: inline-size maakt het element een container voor de inline-as, in een gewone Nederlandse of Engelse tekst dus de breedte.
• container-name is optioneel, maar handig als je geneste containers hebt. Zonder naam kijkt @container naar de dichtstbijzijnde voorouder die een container is.
• De regel binnen @container geldt pas als de container minstens 28rem breed is, ongeacht hoe breed het scherm is.

Je kunt ook de shorthand gebruiken: container: card / inline-size;.

Belangrijke regel: een container kan zichzelf niet bevragen

De stijlen in een @container-blok gelden voor de nakomelingen van de container, niet voor de container zelf. Wil je de buitenste kaart stylen, zet de container dan op een wrapper eromheen. Dat is precies waarom het voorbeeld een .card-wrapper heeft.

Container query-eenheden

Naast de queries zelf krijg je nieuwe eenheden die relatief zijn aan de container. Daarmee schalen typografie en spacing mee met het component.

Eenheid	Betekenis	Typisch gebruik
cqi	1% van de inline-grootte (meestal breedte)	Vloeiende koppen binnen een kaart
cqb	1% van de block-grootte (meestal hoogte)	Alleen bij containers met container-type: size
cqw / cqh	1% van breedte of hoogte	Fysieke variant van cqi/cqb
cqmin / cqmax	De kleinste of grootste van cqi en cqb	Elementen die in beide richtingen moeten passen

Een praktische combinatie is font-size: clamp(1.25rem, 4cqi + 0.5rem, 2.25rem);. De kop groeit mee met de kaart, maar wordt nooit onleesbaar klein of absurd groot.

Container queries of media queries?

Container queries vervangen media queries niet. Ze hebben elk hun eigen taak:

• Media queries gebruik je voor de paginalayout: het aantal kolommen van de hoofdgrid, de navigatie die inklapt, voorkeuren zoals prefers-reduced-motion en prefers-color-scheme.
• Container queries gebruik je voor componenten die op verschillende plekken terechtkomen: kaarten, teasers, formulierblokken, prijstabellen, widgets.

Een vuistregel die we zelf hanteren: als je bij het schrijven van een media query denkt “behalve als dit component in de zijbalk staat”, dan wil je een container query.

Container queries combineren ook mooi met :has(). Daarmee kun je een component laten reageren op zowel zijn ruimte als zijn inhoud, bijvoorbeeld een andere layout als er wel of geen afbeelding in de kaart staat. Hoe dat werkt, lees je in CSS :has() in de praktijk.

Valkuilen en aandachtspunten

1. size vraagt om een vaste hoogte. Met container-type: size bevraag je ook de hoogte, maar dan bepaalt de inhoud niet meer de hoogte van de container. Zonder expliciete hoogte klapt hij in. Gebruik dus vrijwel altijd inline-size.
2. Containment heeft gevolgen. Een container met inline-size krijgt zijn breedte niet meer van zijn inhoud. In een flexbox of grid zonder expliciete breedte kan een container daardoor smaller worden dan je verwacht.
3. Style queries zijn nog niet overal. Er bestaan ook queries op custom properties (@container style(--variant: compact)), maar die worden nog niet door alle browsers ondersteund. Gebruik ze alleen als progressieve verbetering.
4. Denk aan fallback-stijlen. Schrijf de basisstijl van een component voor de smalste situatie en voeg grotere varianten toe in @container-regels. Dan blijft het component bruikbaar, wat er ook gebeurt.

Zo pak je het aan

1. Kies één component dat op meerdere plekken voorkomt, zoals een kaart of call-to-action-blok.
2. Zet een wrapper als container met container-type: inline-size en geef hem een naam.
3. Schrijf de smalle versie als basis, zonder query.
4. Voeg breekpunten toe op componentniveau met @container. Kies ze op basis van wanneer de inhoud er goed uitziet, niet op basis van apparaatbreedtes.
5. Vervang vaste lettergroottes door clamp() met cqi waar dat zinvol is.
6. Test het component op elke plek waar het voorkomt, en ruim daarna de oude modifier-classes en media queries op.

Stel: een makelaar heeft woningkaarten op de homepage (drie naast elkaar), op de overzichtspagina (twee naast elkaar) en in een zijbalk (één smalle kolom). Met één container query wisselt de kaart zelf tussen gestapeld en horizontaal, en verdwijnen drie varianten uit de stylesheet.

Wil je direct aan de slag, dan vind je kant-en-klare voorbeelden in onze gratis CSS-snippets. Meer achtergrond over de specificatie staat op MDN.

Waarom dit ertoe doet voor je website

Container queries zijn niet alleen een fijnere manier van werken voor developers. Ze leiden tot minder CSS, minder uitzonderingen en componenten die zich voorspelbaar gedragen. Dat maakt een site makkelijker uit te breiden en te onderhouden, en voorkomt dat een nieuwe pagina het ontwerp breekt. In een maatwerk website bouwen we componenten daarom vanaf het begin zo dat ze overal passen.

Conclusie

Container queries verschuiven de vraag van “hoe groot is het scherm?” naar “hoeveel ruimte heeft dit component?”. Dat is de vraag die je eigenlijk altijd al wilde stellen. Gebruik media queries voor de paginalayout, container queries voor componenten, en combineer ze met clamp() en container-eenheden voor typografie die meeschaalt. Begin klein met één kaart en je merkt snel hoeveel uitzonderingen je kunt schrappen.

Zin om te experimenteren? Duik in het CSS-lab met gratis snippets en bouw je eerste container query vandaag nog.