Steen voor steen: Help ons CSS Masonry te bouwen

Patrick Brosset

Alison Maher

Gepubliceerd: 23 juli 2025

De teams voor Microsoft Edge en Google Chrome zijn verheugd om aan te kondigen dat CSS Masonry klaar is voor vroege ontwikkelaarstests vanuit Chrome en Edge 140.

Omdat er nog steeds problemen zijn met de CSS-masonryspecificatie 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 vandaag nog CSS Masonry in Chromium

Om CSS Masonry vandaag te testen:

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

Als de functie is ingeschakeld, kunt u deze in actie zien door de Microsoft Edge-demo's te bekijken (bekijk de broncode van de demo's ). U kunt ook verder lezen om meer te weten te komen over de functie en de beschikbare syntaxis.

Wat is metselwerk?

CSS Masonry is een lay-outmodus waarmee u items kunt rangschikken op een manier die niet zo eenvoudig te realiseren is met een CSS-raster, flexbox of lay-out met meerdere kolommen.

Met CSS Masonry kunt u items in een kolom- of rijindeling rangschikken, waarbij de items binnen die kolommen of rijen op een samengevouwen manier worden geplaatst.

Beschouw metselwerk als een snelweg, waarbij de enige beperking het aantal en de grootte van de verschillende rijstroken is. Binnen de rijstroken kunnen voertuigen elke gewenste afstand afleggen en proberen ze altijd zo dicht mogelijk bij hun bestemming te komen, wat het beginpunt van het metselwerk is.

De elementen van uw lay-out zijn slechts in één richting beperkt en kunnen vrij langs de andere richting bewegen, ongeacht de andere elementen die zich in de buurt bevinden. Metselwerk verschilt van een rasterwerk doordat de sporen slechts in één richting zijn gedefinieerd.

Bij masonry is de visuele volgorde van items minder belangrijk dan het uiteindelijke ontwerp. Met masonry kunt u de beschikbare ruimte optimaal benutten, ongeacht welke items u hebt. Dit maakt het een uitstekende keuze voor pagina's met een hoge visuele focus, waarbij de visuele volgorde van de content minder belangrijk is dan het uiteindelijke resultaat.

Een interessant aspect van metselwerk is dat het ook objecten mogelijk maakt om meerdere sporen te overspannen, net als bij een raster. In dat geval worden objecten zo geplaatst dat ze zoveel mogelijk van de beschikbare ruimte innemen.

Dit automatische plaatsingsgedrag kan leiden tot zeer interessante resultaten, iets waar webdesigners al lange tijd naar streven. 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 items (de titel in dit voorbeeld) over meerdere kolommen kunnen worden verdeeld:

Hieronder vindt u nog een paar voorbeelden van waar metselwerk voor gebruikt kan worden.

Een bloglay-out waarin de miniatuur en beschrijving van elk bericht worden weergegeven.

Een nieuwssite waar artikelen in kolommen worden weergegeven, waarbij sommige artikelen breder zijn dan andere en hoofdafbeeldingen de volledige breedte van de pagina beslaan.

Een verzameling foto's met verschillende kolomgrootten, waarbij bepaalde foto's meerdere kolommen beslaan.

Oplossingen en hun beperkingen

Om dit ontwerppatroon vandaag de dag op het web te implementeren, heb je JavaScript-bibliotheken of workarounds nodig die gebruikmaken van CSS-rasters, flexboxen of meerdere kolommen. Dit kan echter nadelen met zich meebrengen, waaronder:

• Slechtere prestaties : vertrouwen op JavaScript-bibliotheken of aangepaste code om CSS-masonry na te bootsen, gaat ten koste van de prestaties. Dit kan leiden tot negatieve gebruikerservaringen.
• Hogere codecomplexiteit :
  • Het is lastig om de juiste plaatsing van items en verdeling van de ruimte binnen een CSS-raster, flexbox of multi-kolom te garanderen om een CSS-masonry-indeling na te bootsen.
  • Het verwerken van specifieke functies, zoals items die meer dan één kolom of rij beslaan, aangepaste volgorde van items of aanpassingen aan de viewport, kan ook tot complexiteit en beperkingen leiden.
• Grotere onderhoudslast : complexe, aangepaste CSS- of JavaScript-code is lastiger te onderhouden.

CSS-raster is een fantastische lay-outmodus die zeer flexibel is en waarmee je veel verschillende lay-outstijlen kunt creëren, of het nu gaat om een hele webpagina, een component of gewoon om individuele items uit te lijnen. Het heeft echter niet dezelfde kenmerken als masonry.

In CSS-rasters zijn de rijen en kolommen strikt gedefinieerd en kunnen items alleen binnen de rastercellen bestaan. Als je items langs een van de assen wilt plaatsen, maar de items niet de juiste grootte hebben om in hun respectievelijke cellen te passen, zul je moeten kiezen tussen het laten van ruimte tussen de items of het uitrekken om de lege ruimte op te vullen.

Net als metselwerk maakt Flexbox slechts gebruik van één richting en laat het items de ruimte bepalen die ze in de andere richting willen innemen. Dit betekent dat je met Flexbox een lay-out kunt creëren die eruitziet als een metselwerklay-out, zolang je de items maar in de blokrichting wilt plaatsen, kolom voor kolom. De Flex-container heeft ook een gedefinieerde blokgrootte of -hoogte nodig om de items over een nieuwe Flex-lijn te laten lopen en zo een nieuwe kolom te creëren.

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

Het punt om hier te onthouden is niet dat raster-, flexbox- of multikolom-layouts slechtere layouts zijn dan masonry. Het zijn geweldige lay-outs met veel toepassingsmogelijkheden. Het punt is: als je een masonry-layout wilt, dan is CSS masonry wat je daarvoor nodig hebt.

De staat van CSS-metselwerk

De CSS Working Group is bezig met het opstellen van masonry in de CSS Grid Level 3- specificatie. De specificatie is nog in ontwikkeling en bevat tijdelijk twee verschillende voorgestelde syntaxisvarianten. De eerste gebruikt een nieuw trefwoord voor de display eigenschap, terwijl de tweede masonry direct in de CSS-rasterlay-out is geïntegreerd.

Gebruik display: masonry

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

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

In deze syntaxis wordt CSS-masonry direct geïntegreerd in CSS-raster. De masonry-modus wordt geactiveerd door het trefwoord masonry toe te passen op de definitie grid-template-columns in het geval van een rijgebaseerde masonry-indeling, of op de definitie grid-template-rows in het geval van een kolomgebaseerde masonry-indeling.

Meer details over dit voorstel en de motivatie ervoor zijn te vinden in de WebKit-post Help us choose the final syntax for Masonry in CSS .

Houd er rekening mee dat een alternatief voor dit voorstel de eigenschap item-pack en het trefwoord collapse zijn. Deze zouden CSS-masonry activeren in plaats van een van de twee rastersjablooneigenschappen te gebruiken.

Sinds de publicatie van de berichten van de Chrome- en WebKit-teams heeft de CSSWG de discussie over de algehele syntaxis voortgezet om verder te komen. Uw feedback kan bijdragen aan de verdere ontwikkeling binnen deze forums.

Voor meer informatie over de huidige status van de discussies, zie issue 11593 , waarin de huidige onderwerpen voor discussie over masonry-syntaxis worden beschreven, en issue 11243 voor een samenvatting van het syntaxisdebat tot nu toe.

Maak je eigen CSS-maaswerklay-out

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

Hoewel de syntaxis voor CSS Masonry nog in 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 . De volgende voorbeelden laten zien wat er beschikbaar is in de proefversie voor ontwikkelaars.

Maak een stenen container

Om uw eerste kolomgebaseerde masonrycontainer te maken, gebruikt u display:masonry en definieert u de kolomgroottes met behulp van 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 rijgebaseerde masonrycontainer gebruikt u display:masonry , definieert u uw rijgroottes met grid-template-rows en stelt u vervolgens masonry-direction:row in.

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

Zoals u wellicht heeft 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 de grootte en plaatsing van de rastersjabloon te hergebruiken in de CSS Masonry-layout.

Hoewel dit een groter hergebruik van eigenschappen tussen verschillende lay-outtypen mogelijk maakt, vindt u het mogelijk verwarrend. We horen graag van u hierover. We kunnen overwegen om meer generieke aliassen te maken voor eigenschappen zoals grid-template-columns en grid-template-rows , zoals template-columns of template-rows , die zowel voor grid als metselwerk gebruikt kunnen worden.

Gebruik de standaard spoorgrootte

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

In grid staan grid-template-columns en grid-template-rows standaard op none , wat, zoals momenteel gedefinieerd, normaal gesproken resulteert in één kolom of rij. Voor masonry zou deze standaardinstelling vaker wel dan niet resulteren in een ongewenste lay-out.

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

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

Zoals u op de afbeelding kunt zien, maakt de metselwerkcontainer zoveel kolommen op automatische maat als er in de beschikbare ruimte passen.

Met CSS-raster worden alle items geplaatst voordat de spoorbreedte wordt bepaald, wat betekent dat deze automatische spoorbreedte-definitie niet mogelijk is. Met CSS-masonry is deze beperking echter niet langer van toepassing, omdat plaatsing en grootte met elkaar verweven en vereenvoudigd zijn. Nu deze beperking is opgeheven, kunnen we een bruikbaardere standaardspoorbreedte voor masonry-layouts aanbieden.

Probeer de eigenschap van masonry in het kort

Zoals eerder vermeld, is de huidige implementatie in Chromium afhankelijk van de eigenschappen grid-template-* om het metselwerkspoor in uw lay-out te definiëren. Omdat metselwerk echter maar één dimensie heeft, hebben we ook de verkorte eigenschap masonry geïmplementeerd. Deze kunt u gebruiken om zowel de metselwerkrichting als de spoordefinitie in één keer te definiëren, zonder de verwarrende eigenschap met het voorvoegsel grid- .

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

.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 masonry wordt nog besproken door de CSS Working Group. Probeer het vandaag nog uit en laat ons weten wat je ervan vindt.

Ga voor aangepaste spoorgroottes

Als het gaat om het bepalen van spoorgroottes, is metselwerk net zo flexibel als rasterwerk, waardoor u het aantal en de grootte van de spoorbreedtes nauwkeurig kunt afstemmen. Metselwerksporen hoeven ook niet allemaal dezelfde grootte te hebben, bijvoorbeeld:

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

In dit voorbeeld definiëren we eerst twee sporen van 3 rem, gevolgd door een wisselend aantal sporen van 5 rem, gevolgd door één spoor van 12 rem.

Overspan meerdere sporen

In metselwerk hoeven objecten niet beperkt te blijven tot de sporen waarin ze geplaatst worden, omdat ze indien nodig meerdere sporen kunnen overspannen. Dit kan erg handig zijn wanneer sommige objecten belangrijker zijn dan andere en meer ruimte nodig hebben.

Bijvoorbeeld:

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

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

U kunt deze mogelijkheid ook gebruiken om meerdere sporen te bestrijken, zodat bepaalde items zich over de gehele lengte van de container bevinden:

.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.

Fijnafstemming van de plaatsing van metselwerkitems

In CSS Masonry worden items in de kolom of rij geplaatst met de kortste positie.

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

Als u vindt dat een verschil van 10 px in de looppositie klein genoeg is voor uw geval en u het derde item liever in de eerste kolom plaatst om de bronvolgorde beter te laten overeenkomen, gebruikt u de eigenschap item-tolerance .

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

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

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

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

Andere beschikbare eigendommen

U kunt dezelfde sjabloonformaat- en plaatsingseigenschappen gebruiken om items in de rasteras van een masonrycontainer te plaatsen en de grootte ervan te bepalen, net 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 uw masonry-layout.

Oproep voor feedback

We kunnen niet wachten om je CSS Masonry te laten ontdekken, je creativiteit de vrije loop te laten en de nieuwe mogelijkheden te ontdekken die het je kan bieden. Een goede manier om te beginnen is door onze demo's en de broncode te bekijken en je eigen voorbeelden in Chromium te bouwen (vergeet niet eerst de vlag in te schakelen ).

Jouw feedback is belangrijk om ons te helpen de API vorm te geven en te controleren of deze is ontworpen om aan jouw online behoeften te voldoen. Probeer Masonry eens uit en laat ons weten wat je ervan vindt!

Als u ideeën of feedback hebt over de vormgeving van de API, laat het ons dan weten door een reactie te plaatsen op Issue 11243. Als u liever een bericht schrijft op uw eigen blog of op sociale media, 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 steeds actief aan werken en dat je gevallen kunt tegenkomen waarin het niet naar behoren functioneert. Enkele van de huidige beperkingen zijn onder andere: dense packing, reverse placement, subgrid-ondersteuning, out-of-flow-ondersteuning, baseline-ondersteuning, DevTools-ondersteuning, fragmentatie-ondersteuning, gap decoration-ondersteuning, enzovoort.

Als u tijdens het testen van de functie een bug tegenkomt, kunt u uw feedback delen door een nieuwe Chromium-bug te openen.