Steen voor steen: Help ons CSS Masonry te bouwen

Patrick Brosset

Alison Maher

Gepubliceerd: 23 juli 2025, Laatst bijgewerkt: 13 februari 2026

De teams van Microsoft Edge en Google Chrome kondigen met trots aan dat CSS-masonry klaar is voor vroege ontwikkelaarstests in Chrome en Edge versie 140.

Omdat er nog steeds openstaande kwesties zijn rondom de CSS-masonry-specificatie en -syntaxis, is uw feedback cruciaal om ons te helpen de definitieve vorm van de API te bepalen. Probeer de functie uit en laat ons weten wat u ervan vindt.

Test CSS Masonry vandaag nog in Chromium.

Om CSS Masonry vandaag nog te testen:

1. Gebruik Chrome of Edge versie 140 of later (of een andere op Chromium gebaseerde browser met een overeenkomende versie).
2. Open about:flags in een nieuw tabblad.
3. Zoek naar "CSS Masonry Layout".
4. Schakel de vlag in.
5. Start de browser opnieuw op.

Met deze functie ingeschakeld kunt u de werking ervan bekijken in de Microsoft Edge-demo's (bekijk de broncode van de demo's ) of verder lezen voor meer informatie over de functie en de beschikbare syntaxis.

Wat is metselwerk?

CSS-masonry is een lay-outmodus waarmee je een baksteenachtige rangschikking van elementen kunt creëren, op een manier die niet gemakkelijk te bereiken is met CSS-grid, flexbox of lay-outs met meerdere kolommen.

Met CSS Masonry kunnen items in een kolom- of rijindeling worden geplaatst, waarbij de items binnen die kolommen of rijen worden samengevouwen.

Beschouw metselwerk als een snelweg, waarbij de enige beperking het aantal en de breedte van de verschillende rijstroken is. Binnen de rijstroken kunnen voertuigen elke gewenste lengte afleggen en ze proberen altijd zo dicht mogelijk bij hun bestemming te komen, die het begin van de metselwerkstructuur vormt.

De elementen in je lay-out zijn slechts in één richting beperkt en kunnen in de andere richting vrij bewegen, ongeacht andere elementen in de buurt. Metselwerk verschilt van een raster doordat de sporen ervan slechts in één richting zijn gedefinieerd.

Bij metselwerk is de visuele ordening van elementen minder belangrijk dan het uiteindelijke ontwerp. Metselwerk stelt je in staat om de beschikbare ruimte optimaal te benutten, ongeacht de elementen die je hebt. Dit maakt het een uitstekende keuze voor pagina's met veel visuele elementen, waar de visuele ordening van de inhoud minder belangrijk is dan het eindresultaat.

Een interessant aspect van metselwerk is dat het, net als bij een raster, ook mogelijk maakt dat objecten meerdere sporen overspannen. Wanneer dat gebeurt, worden objecten zo geplaatst dat de beschikbare ruimte zo goed mogelijk wordt benut.

Dit automatische plaatsingsgedrag kan leiden tot zeer interessante resultaten, die webdesigners al lange tijd proberen te bereiken. Bekijk bijvoorbeeld de demo van de fotogalerij van New York City , die laat zien hoe foto's compact over meerdere kolommen kunnen worden weergegeven, terwijl bepaalde elementen (de titel in dit voorbeeld) zich over meerdere kolommen kunnen uitstrekken:

Hier volgen nog een paar voorbeelden van waarvoor metselwerk gebruikt kan worden.

Een bloglay-out met een miniatuurafbeelding en beschrijving van elk bericht.

Een nieuwssite waar artikelen in kolommen verschijnen, waarbij sommige artikelen breder zijn dan andere, en de belangrijkste afbeeldingen de volledige breedte van de pagina beslaan.

Een verzameling foto's, met verschillende kolomgroottes, waarbij sommige foto's meerdere kolommen beslaan.

Oplossingen en hun beperkingen

Het implementeren van dit ontwerppatroon op het web vereist tegenwoordig het gebruik van JavaScript-bibliotheken of oplossingen die gebruikmaken van CSS-grid, flexbox of multi-column. Dit kan echter nadelen met zich meebrengen, waaronder:

• Slechtere prestaties : Het gebruik van JavaScript-bibliotheken of aangepaste code om CSS-masonry na te bootsen, brengt prestatieverlies met zich mee, wat kan leiden tot een negatieve gebruikerservaring.
• Hogere codecomplexiteit :
  • Het is lastig om de juiste plaatsing van elementen en de juiste ruimteverdeling binnen een CSS-grid, flexbox of multi-column lay-out te garanderen, om zo een CSS-masonry lay-out na te bootsen.
  • Het omgaan met specifieke kenmerken, zoals items die zich over meerdere kolommen of rijen uitstrekken, het aanpassen van de volgorde van items of het aanpassen aan de weergavegrootte, kan ook leiden tot complexiteit en beperkingen.
• Hogere onderhoudslast : complexe, op maat gemaakte CSS- of JavaScript-code is moeilijker te onderhouden.

CSS Grid is een fantastische lay-outmodus die zeer flexibel is en waarmee je veel verschillende lay-outs kunt creëren, of het nu voor een hele webpagina, een component of gewoon om individuele elementen uit te lijnen is. Het heeft echter niet dezelfde eigenschappen als Masonry.

In een CSS-grid zijn de rijen en kolommen strikt gedefinieerd en kunnen items alleen binnen de cellen van het grid bestaan. Als je items langs een van de assen wilt plaatsen, maar de items niet de juiste afmetingen hebben voor de bijbehorende cellen, moet je kiezen tussen het laten van ruimte tussen de items of het uitrekken ervan om de lege ruimte op te vullen.

Net als bij metselwerk, houdt flexbox slechts rekening met één richting en laat het de elementen zelf bepalen welke ruimte ze in de andere richting willen innemen. Dit betekent dat je met flexbox een lay-out kunt creëren die eruitziet als metselwerk, zolang je maar geen probleem hebt met de plaatsing van de elementen in de blokrichting, kolom voor kolom. De flexcontainer heeft ook een gedefinieerde blokgrootte of hoogte nodig, zodat de elementen op een nieuwe flexlijn terechtkomen en zo een nieuwe kolom vormen.

Met een lay-out met meerdere kolommen kun je ook een patroon creëren dat op metselwerk lijkt, waarbij de items wederom in kolommen worden gerangschikt. Bovendien kun je bij een lay-out met meerdere kolommen de afmetingen van elke kolom niet afzonderlijk aanpassen. Ze hebben allemaal dezelfde grootte, terwijl metselwerk veel meer flexibiliteit biedt bij het definiëren van de sporen waarbinnen de items worden geplaatst.

Het belangrijkste om te onthouden is niet dat grid, flexbox of lay-outs met meerdere kolommen slechter zijn dan masonry. Het zijn juist uitstekende lay-outs met veel toepassingsmogelijkheden. Waar het op neerkomt is: als je een masonry-lay-out wilt, dan is CSS masonry precies wat je nodig hebt.

De staat van CSS-metselwerk

De CSS Working Group werkt aan de implementatie van masonry in de CSS Grid Level 3- specificatie. De specificatie is nog in ontwikkeling en bevat momenteel twee verschillende voorgestelde syntaxen. De eerste gebruikt een nieuw trefwoord voor de display eigenschap, terwijl in de tweede masonry direct is geïntegreerd in de CSS Grid-layout.

Gebruik display: masonry

Deze syntax introduceert CSS-masonry als een eigen display . Meer details over deze aanpak en de achterliggende motivatie zijn te vinden in de blogpost " Feedback nodig: Hoe moeten we CSS-masonry definiëren?" van het Google Chrome-team, en in de rest van dit bericht. Het huidige prototype in Chromium is gebaseerd op dit voorstel.

display: grid; grid-template-*: masonry;

In deze syntax is CSS-masonry direct geïntegreerd in CSS Grid. De masonry-modus wordt geactiveerd door het trefwoord masonry toe te voegen aan de grid-template-columns -definitie in het geval van een rijgebaseerde masonry-layout, of aan de grid-template-rows -definitie in het geval van een kolomgebaseerde masonry-layout.

Meer details over dit voorstel en de achterliggende motivatie zijn te vinden in het WebKit-artikel Help ons de definitieve syntaxis voor Masonry in CSS te kiezen .

Merk op dat een alternatief voor dit voorstel de eigenschap item-pack en het trefwoord collapse zijn, waarmee CSS-masonry wordt geactiveerd in plaats van een van de twee sjablooneigenschappen van het raster te gebruiken.

Sinds de publicatie van berichten door de Chrome- en WebKit-teams heeft de CSSWG de discussies over de algehele syntaxis voortgezet. Uw feedback kan helpen bij de verdere ontwikkeling binnen deze forums.

Voor meer informatie over de huidige stand van de discussies, zie nummer 11593 , waarin de huidige discussieonderwerpen over de syntaxis van de metselwerktaal worden beschreven, en nummer 11243 voor een samenvatting van het syntaxisdebat tot nu toe.

Maak je eigen CSS-masonry-lay-out.

Laten we eens wat plezier hebben en een CSS-masonry-layout maken.

Hoewel de syntaxis voor CSS-masonry nog steeds onderwerp van discussie is, kan onze implementatie van de functie vandaag al in Chromium worden getest door de CSS Masonry Layout-vlag in te schakelen, zoals uitgelegd in Test CSS Masonry vandaag nog . De volgende voorbeelden laten zien wat er beschikbaar is in de ontwikkelaarsversie.

Maak een container van metselwerk.

Om je eerste kolomgebaseerde metselwerkcontainer te maken, gebruik je display:masonry en definieer je de kolomgroottes met grid-template-columns . Omdat masonry-direction standaard op column staat, is het instellen van deze eigenschap optioneel.

.masonry {
  display: masonry;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

Voor een op rijen gebaseerde metselwerkcontainer gebruikt u in plaats daarvan display:masonry , definieert u de rijgroottes met grid-template-rows en stelt u vervolgens masonry-direction:row .

.masonry {
 display: masonry;
 masonry-direction: row;
 grid-template-rows: repeat(auto-fit, minmax(160px, 1fr));
 gap: 10px;
}

Zoals u wellicht hebt opgemerkt, wijkt deze syntaxis enigszins af van het oorspronkelijke voorstel van Google . Ongeacht de trigger die voor CSS Masonry wordt gebruikt, heeft de CSS Working Group besloten om de eigenschappen voor het bepalen van de grootte en plaatsing van de rastertemplate opnieuw te gebruiken binnen de CSS Masonry-layout.

Hoewel dit zorgt voor een betere herbruikbaarheid van eigenschappen tussen verschillende lay-outtypen, kan het verwarrend zijn. We horen graag uw mening hierover. We zouden kunnen onderzoeken of we meer generieke aliassen kunnen creëren voor eigenschappen zoals grid-template-columns en grid-template-rows , bijvoorbeeld template-columns of template-rows , die zowel voor grid- als masonry-lay-outs gebruikt kunnen worden.

Gebruik de standaard spoorgrootte.

Een nieuw weergavetype biedt de mogelijkheid om de standaardinstellingen van eigenschappen te herzien.

In een rasterindeling zijn de standaardwaarden grid-template-columns en grid-template-rows ingesteld op ' none , wat, zoals het nu is gedefinieerd, normaal gesproken resulteert in één kolom of rij. Voor een masonry-indeling zou deze standaardwaarde in de meeste gevallen een ongewenste lay-out opleveren.

De implementatie in Chromium voegt de nieuw voorgestelde definitie voor none toe, die de standaard spoorgrootte in CSS-masonry vervangt. Deze nieuwe standaard spoorgrootte is de waarde repeat(auto-fill, auto) . Deze waarde creëert een mooie masonry-layout zonder dat er spoorgroottes gedefinieerd hoeven te worden.

.masonry {
  display: masonry;
  gap: 10px;
}

Zoals op de afbeelding te zien is, creëert de metselwerkcontainer automatisch zoveel kolommen als er in de beschikbare ruimte passen.

Bij CSS Grid worden alle elementen geplaatst voordat de sporen worden aangepast, waardoor automatische spoorafmetingen niet mogelijk zijn. Met CSS Masonry is deze beperking echter niet langer van toepassing, omdat plaatsing en afmeting met elkaar verweven en vereenvoudigd zijn. Doordat deze beperking is opgeheven, kunnen we een nuttigere standaard spoorafmeting voor Masonry-lay-outs aanbieden.

Probeer de afkorting voor masonry

Zoals eerder vermeld, gebruikt de huidige implementatie in Chromium de ` grid-template-* eigenschappen om het metselwerkpatroon in uw lay-out te definiëren. Omdat metselwerk echter slechts één dimensie heeft, hebben we ook de verkorte eigenschap masonry geïmplementeerd, waarmee u zowel de richting van het metselwerkpatroon als de patroondefinitie in één keer kunt definiëren, zonder de verwarrende eigenschap met het voorvoegsel grid- `.

De volgende twee codefragmenten creëren bijvoorbeeld equivalente CSS-masonry-containers.

.masonry {
 display: masonry;
 masonry: "a a b" 50px 100px 200px row;
}

.masonry {
  display: masonry;
  masonry-direction: row;
  grid-template-rows: 50px 100px 200px;
  grid-template-areas: "a" "a" "b"
}

De afkorting masonry wordt nog steeds besproken door de CSS-werkgroep. Probeer het vandaag nog uit en laat ons weten wat u ervan vindt.

Kies voor aangepaste spoorbreedtes.

Als het gaat om het bepalen van de afmetingen van de rails, biedt metselwerk net zoveel flexibiliteit als rasterwerk, waardoor je het aantal en de grootte van de rails nauwkeurig kunt afstemmen. De rails van metselwerk hoeven ook niet allemaal dezelfde afmetingen te hebben, bijvoorbeeld:

.masonry {
 display: masonry;
 masonry: repeat(2, 3rem) repeat(auto-fit, 5rem) 12rem;
}

In dit voorbeeld definiëren we eerst twee 3rem-tracks, gevolgd door een wisselend aantal 5rem-tracks, en vervolgens één enkele 12rem-track.

Bestrijk meerdere tracks

Bij metselwerk hoeven objecten niet per se binnen de rails te blijven, omdat ze indien nodig meerdere rails kunnen overspannen. Dit kan erg handig zijn wanneer sommige objecten belangrijker zijn dan andere en meer ruimte in beslag nemen.

Bijvoorbeeld:

.masonry {
  display: masonry;
  masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.important-item {
  grid-column: span 2;
}

Je kunt deze mogelijkheid ook gebruiken om meerdere sporen te overspannen, zodat bepaalde items de volledige lengte van de container beslaan:

.masonry {
 display: masonry;
 masonry: repeat(auto-fill, minmax(12rem, 1fr));
}

.full-bleed {
 grid-column: 1 / -1;
}

Dit is wat de demo van de nieuwssite gebruikt om de abonnementsadvertentie in de artikelen weer te geven.

Fijnafstelling van de plaatsing van metselwerkonderdelen

In CSS Masonry worden elementen geplaatst in de kolom of rij met de kortste lengte.

Stel je een metselwerkcontainer met twee kolommen voor. Als de container een item van 110px hoog in de eerste kolom heeft en een item van 100px hoog in de tweede kolom, dan zou een derde item in de tweede kolom worden geplaatst, 10px dichter bij het begin van de metselwerkrichting.

Als u een verschil van 10px in de uitvoerpositie klein genoeg vindt voor uw situatie, en u er de voorkeur aan geeft dat het derde item in de eerste kolom wordt geplaatst om de volgorde in de broncode beter te laten overeenkomen, gebruik dan de eigenschap item-tolerance .

De nieuwe eigenschap item-tolerance regelt de gevoeligheid bij het plaatsen van items.

In het voorgaande voorbeeld kunt u item-tolerance: 10px; toepassen op uw container om de variabiliteit in de plaatsing van items aan te passen:

.masonry {
  display: masonry;
  masonry: 200px 200px;
  gap: 10px;
  item-tolerance: 10px;
}

Merk op dat in de conceptspecificatie deze eigenschap item-slack wordt genoemd. De CSS Working Group heeft onlangs besloten om in plaats daarvan item-tolerance te gebruiken, en de specificatie zal binnenkort worden bijgewerkt.

Andere beschikbare woningen

Je kunt dezelfde sjablooneigenschappen voor grootte en plaatsing gebruiken om items in de rasteras van een masonry-container te positioneren als met CSS Grid, zoals grid-row , grid-column , grid-area , grid-template-areas of order . Ervaar de volledige kracht van CSS Grid bij het maken van je masonry-layout.

Oproep tot feedback

We kunnen niet wachten tot je CSS-masonry gaat ontdekken, creatief aan de slag gaat en de nieuwe mogelijkheden ervan ontdekt. ​​Een goede manier om te beginnen is door onze demo's en de bijbehorende broncode te bekijken en je eigen voorbeelden in Chromium te bouwen (vergeet niet eerst de juiste vlag in te schakelen ).

Uw feedback is belangrijk om ons te helpen de API vorm te geven en te controleren of deze is ontworpen om aan uw behoeften op het web te voldoen. Probeer Masonry eens uit en laat ons weten wat u ervan vindt!

Als je ideeën of feedback hebt over de structuur van de API, laat het ons dan weten door een reactie achter te laten op Issue 11243. Of, als je liever een bericht op je eigen blog of sociale media plaatst, laat het ons dan weten via X of LinkedIn .

CSS-masonry wordt nog steeds geïmplementeerd in Chromium. Als je het test, houd er dan rekening mee dat we er nog actief aan werken en dat je mogelijk gevallen tegenkomt waarin het zich niet gedraagt ​​zoals verwacht. Enkele van de huidige beperkingen zijn onder andere dense packing, reverse placement, subgrid-ondersteuning, out-of-flow-ondersteuning, baseline-ondersteuning, DevTools-ondersteuning, fragmentatie-ondersteuning en gap decoration-ondersteuning.

Als je tijdens het testen van de functie een bug tegenkomt, deel dan je feedback door een nieuw Chromium-bugrapport aan te maken.