Gepubliceerd: 19 september 2024, Laatst bijgewerkt: 13 februari 2026
De CSS Working Group heeft de twee CSS-masonry-voorstellen samengevoegd tot één conceptspecificatie . De groep hoopt dat dit de vergelijking tussen de twee vereenvoudigt en een definitieve beslissing mogelijk maakt. Het Chrome-team blijft echter van mening dat een aparte masonry-syntaxis de beste aanpak is. Hoewel het grootste prestatieprobleem dat in ons vorige bericht werd genoemd, is opgelost, blijven er zorgen bestaan over de syntaxis, de beginwaarden en hoe gemakkelijk een versie in combinatie met grid te leren zou zijn.
Om onze aannames te testen, hebben we echter een aantal voorbeelden uitgewerkt om te laten zien hoe metselwerk met elke versie zou werken. Bekijk de voorbeelden in dit bericht en geef ons uw feedback, zodat we een beslissing kunnen nemen en met deze functie verder kunnen gaan.
Dit bericht behandelt niet alle mogelijke gebruiksscenario's, maar het is duidelijk dat het scheiden van de masonry-indeling van de grid-indeling er niet toe zal leiden dat de functionaliteit van de functie verloren gaat. Sterker nog, het tegendeel kan waar zijn. Zoals u in dit bericht zult zien, creëert de display: masonry versie nieuwe mogelijkheden en een eenvoudigere syntaxis. Daarnaast hebben veel ontwikkelaars hun bezorgdheid geuit over de mogelijke toegankelijkheidsproblemen die het herschikken van items met de masonry-indeling kan veroorzaken. Ook dit wordt voor beide versies van de syntaxis aangepakt via de voorgestelde reading-flow -eigenschap.
Een basisontwerp voor metselwerk
Dit is de indeling die de meeste mensen voor ogen hebben bij het denken aan metselwerk. Elementen worden in rijen geplaatst en nadat de eerste rij is geplaatst, schuiven de volgende elementen op in de ruimte die door de kleinere elementen is vrijgekomen.
Met display: masonry
Om een metselwerklay-out te maken, gebruikt u de waarde ' masonry voor de eigenschap display . Dit creëert een metselwerklay-out met kolomsporen die u definieert (of die door de inhoud worden gedefinieerd) en metselwerk in de andere as. Het eerste item wordt weergegeven aan het begin van het blok en in de lijn (dus linksboven), en de items worden in de lijnrichting geplaatst.
Om tracks te definiëren, gebruikt u masonry-template-tracks met tracklijstwaarden zoals die in CSS grid layout worden gebruikt.
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
gap: 10px;
}
Met display: grid
Om een metselwerklay-out te maken, creëer je eerst een rasterlay-out met de waarde ' grid voor de eigenschap display . Definieer kolommen met de eigenschap grid-template-columns en geef vervolgens grid-template-rows de waarde ' masonry .
Dit creëert een lay-out zoals je zou verwachten bij automatisch geplaatste rasterelementen, maar de elementen in elke rij gebruiken een metselwerklay-out en worden herschikt om de ruimte op te vullen die is vrijgekomen door kleinere elementen in de voorgaande rij.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
gap: 10px;
}
Punten om te overwegen bij de keuze tussen de twee opties
Een opvallend verschil tussen deze methoden is dat je met de display: masonry versie een masonry-layout krijgt, zelfs als je geen tracks specificeert met masonry-template-tracks . Daarom display: masonry wellicht alles wat je nodig hebt. Dit komt doordat de initiële waarde van masonry-template-tracks ` repeat(auto-areas, auto) is. De layout creëert zoveel tracks van automatische grootte als er in de container passen.
Omgekeerde stroming met metselwerk
De specificatie bevat manieren om de richting van de metselwerkstroom te veranderen. Zo kunt u bijvoorbeeld de stroom zo aanpassen dat deze van de blokzijde naar boven loopt.
Met display: masonry
Maak een metselwerklay-out met display: masonry , en gebruik vervolgens masonry-direction met de waarde column-reverse .
.masonry {
display: masonry;
masonry-template-tracks: repeat(3, 1fr);
masonry-direction: column-reverse;
}
Met display: grid
Maak een masonry-layout met display: grid en grid-template-rows: masonry . Gebruik vervolgens de eigenschap grid-auto-flow met een nieuwe waarde van row-reverse om ervoor te zorgen dat de items vanaf de blokzijde van de gridcontainer worden gerangschikt.
.masonry {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: masonry;
grid-auto-flow: row-reverse;
}
Punten om te overwegen bij de keuze tussen de twee opties
De weergave display: masonry voelt erg vergelijkbaar aan met hoe flexbox werkt. Verander de richting waarin kolommen lopen met behulp van de eigenschap masonry-direction met de waarde ` column-reverse .
De CSS-gridversie gebruikt grid-auto-flow . Zoals ze nu gedefinieerd zijn, zouden grid-auto-flow: row-reverse en grid-auto-flow: column-reverse hetzelfde effect hebben. Dit kan verwarrend zijn, omdat je misschien verwacht dat ze iets anders doen.
Metselwerk voor rijen
Je kunt ook de richting wijzigen om rijen te definiëren.
Met display: masonry
Maak een masonry-layout met display: masonry en stel vervolgens de waarde van masonry-direction in op row . Tenzij je wilt dat je rijen een specifieke blokgrootte hebben, hoef je geen spoorafmetingen op te geven, aangezien de standaardwaarde auto is. De sporen zullen zich dus aanpassen aan de inhoud die ze bevatten.
.masonry {
display: masonry;
masonry-direction: row;
}
Met display: grid
.masonry {
display: grid;
grid-template-columns: masonry;
grid-template-rows: repeat(3, 1fr);
}
Punten om te overwegen bij de keuze tussen de twee opties
Net als bij de omgekeerde stroom betekent het wijzigen van de display: masonry versie) van kolommen naar rijen dat de waarde van masonry-direction moet worden aangepast. Bij de rasterversie moet u de waarden van de eigenschappen grid-template-columns en grid-template-rows omwisselen. Of, als u de verkorte notatie gebruikt, de volgorde van de syntaxis wijzigen.
Bij beide voorbeelden van het wisselen van de stroom voelt de weergave display: masonry aan intuïtiever aan. Er is één eigenschap die de stroom regelt masonry-direction , en deze kan een van de volgende waarden aannemen:
-
row -
column -
row-reverse -
column-reverse
Voeg vervolgens alle benodigde maatinformatie toe aan masonry-template-tracks , ervan uitgaande dat de standaardwaarde 'auto' niet is wat u nodig hebt.
Met een raster moet je de eigenschap grid-auto-flow gebruiken om de rijrichting om te keren, en de waarde van de eigenschap grid-template-* om de rijrichting te veranderen (zoals bij metselwerk). Het is in de huidige rastersyntaxis ook niet mogelijk om de waarde voor de rasteras ongedefinieerd te laten. Je moet altijd de eigenschap grid-template-* specificeren voor de as die geen waarde van masonry heeft.
Plaats items
In beide versies kunt u objecten expliciet positioneren met behulp van de lijngebaseerde plaatsing die u wellicht al kent van de rasterindeling. In beide versies kunt u objecten alleen positioneren op de rasteras , dit is de as met de vooraf gedefinieerde sporen; u kunt geen objecten positioneren op de as die de metselwerkindeling weergeeft.
Met display: masonry
De volgende CSS definieert een masonry-layout met vier kolommen. De rasteras is daarom 'columns'. Het item met de klasse ' a wordt geplaatst van de eerste kolomlijn tot de derde kolomlijn, waarbij het twee sporen met de nieuwe eigenschappen masonry-track-* overspant. Dit kan ook worden gedefinieerd als een verkorte notatie van masonry-track: 1 / 3; .
.masonry {
display: masonry;
masonry-template-tracks: repeat(4, 1fr);
}
.a {
masonry-track-start: 1;
masonry-track-end: 3;
}
Met display: grid
De volgende CSS definieert een masonry-layout met vier kolommen. De rasteras is daarom 'columns'. Het element met de klasse ' a wordt geplaatst van de eerste kolomlijn tot de derde kolomlijn, waarbij twee sporen met de eigenschappen grid-column-* worden overspannen. Dit kan ook worden gedefinieerd als een verkorte notatie: grid-column: 1 / 3; .
Als de rasteras kolommen zijn, worden de eigenschappen grid-row-* genegeerd, en als de rasteras rijen zijn, worden de eigenschappen grid-columns-* genegeerd.
.masonry {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
}
.a {
grid-column-start: 1;
grid-column-end: 3;
}
Je kunt benoemde lijnen gebruiken met beide syntaxen. De volgende voorbeelden tonen een raster met twee kolomlijnen met de naam a .
Met display: masonry
De benoemde lijnen worden gedefinieerd in de waarde van de tracklijst van masonry-template-tracks . Het item kan na elke lijn met de naam a worden geplaatst.
.masonry {
display: masonry;
masonry-template-tracks: 100px [a] auto [a] auto 100px;
}
.item {
masonry-track: a;
}
Met display: grid
De benoemde regels worden gedefinieerd in de waarde van grid-template-columns in de tracklijst. Het item wordt geplaatst na de eerste regel met de naam a . Als de eigenschap grid-row is gedefinieerd, wordt deze genegeerd.
.masonry {
display: grid;
grid-template-columns: 100px [a] auto [a] auto 100px;
grid-template-rows: masonry;
}
.item {
grid-column: a;
grid-row: a; /* ignored */
}
Je kunt in beide syntaxen ook benoemde gebieden gebruiken. De volgende voorbeelden tonen een raster met drie sporen met de namen "a", "b" en "c".
Met display: masonry
De sporen worden benoemd naar de waarde van masonry-template-areas . Omdat er geen spoorafmetingen zijn gedefinieerd, hebben alle drie standaard de auto afmeting. Het item wordt in het spoor "a" geplaatst.
.masonry {
display: masonry;
masonry-template-areas: "a b c";
}
.item {
masonry-track: a;
}
Dit werkt hetzelfde, of je nu rijen of kolommen definieert; het enige verschil zit hem in de eigenschap masonry-direction .
Met display: grid
Voor kolommen is de syntax vrijwel identiek. Omdat er geen spoorafmetingen zijn gedefinieerd, gebruiken alle drie standaard de auto afmeting, maar je moet nog steeds expliciet aangeven dat de andere as een metselwerkpatroon heeft:
.masonry {
display: grid;
grid-template-areas: "a b c";
grid-template-rows: masonry;
}
.item {
grid-column: a;
}
Voor rijen moet de waarde echter anders worden geschreven, omdat grid-template-areas in feite een tweedimensionaal gebied definieert en elke rij als een aparte tekenreeks wordt geschreven:
.masonry {
display: grid;
grid-template-areas: "a" "b" "c"; /* Note the difference, each row is quoted. */
grid-template-columns: masonry;
}
.item {
grid-row: a;
}
Punten om te overwegen bij de keuze tussen de twee opties
Bij elke positionering werkt de display: masonry syntax beter als het gaat om het wisselen van richting. Omdat de masonry-track-* eigenschap werkt in de richting van de rasteras, hoeft u alleen de waarde van masonry-direction aan te passen om de richting te veranderen. Bij de rasterversie hebt u op zijn minst redundante eigenschappen nodig om het wisselen mogelijk te maken. Zie echter de vorige voorbeelden voor andere manieren waarop het veranderen van richting ingewikkelder is met de rasterversie.
Stenografie
In dit bericht zijn de lange notaties gebruikt om duidelijker te maken welke eigenschappen in gebruik zijn. Zowel de weergave-optie display: masonry als display: grid kunnen echter ook met verkorte notaties worden gedefinieerd.
Met display: masonry
De display: masonry gebruikt het trefwoord masonry . Om de basislay-out in masonry-stijl te creëren, gebruikt u de volgende CSS:
.masonry {
display: masonry;
masonry: repeat(3, 1fr);
}
Om een eenvoudige, op rijen gebaseerde metselwerkindeling te creëren:
.masonry {
display: masonry;
masonry: row;
}
Om sporen en een rijgebaseerde lay-out te definiëren met behulp van de verkorte notatie:
.masonry {
display: masonry;
masonry: repeat(3, 1fr) row;
}
Met display: grid
Om de basisindeling van het metselwerk te creëren met behulp van de grid .
.masonry {
display: grid;
grid: masonry / repeat(3, 1fr);
}
Om een eenvoudige, op rijen gebaseerde metselwerkindeling te creëren:
.masonry {
display: grid;
grid: repeat(3, auto) / masonry;
}
In complexere voorbeelden kunnen, omdat de algehele syntaxis display:masonry eenvoudiger is, meer eigenschappen in de verkorte notatie worden opgenomen zonder dat het te complex wordt.
Stel je bijvoorbeeld voor dat je drie kolommen maakt, genaamd "a", "b" en "c", die je van onder naar boven vult.
Met display:masonry
In display: masonry ; deze drie elementen kunnen in de verkorte notatie als volgt worden weergegeven:
.masonry {
display: masonry;
masonry: column-reverse "a b c";
}
Omdat ze automatisch worden aangepast, hoeft u de afmetingen niet op te geven. Mocht u echter een specifieke afmeting willen, dan kunt u die toevoegen. Bijvoorbeeld: masonry: column-reverse 50px 100px 200px "ab c"; .
Bovendien kan elk onderdeel vrij worden herschikt; er is geen specifieke volgorde die u hoeft te onthouden. En als u liever rijen wilt gebruiken, hoeft u alleen maar column-reverse te vervangen door row ' of row-reverse ; de rest van de syntaxis blijft hetzelfde.
Met display: grid
Bij display: grid moeten deze drie aspecten afzonderlijk worden ingesteld:
.masonry {
display: grid;
grid-template-rows: masonry;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Net als in het metselwerkvoorbeeld worden alle kolommen auto aangepast, maar als u liever expliciete afmetingen wilt opgeven, is dat ook mogelijk:
.masonry {
display: grid;
grid: masonry / 50px 100px 200px;
grid-template-areas: "a b c";
grid-auto-flow: wrap-reverse;
}
Of als je 'grid' wilt gebruiken om alle afmetingen en gebiedsnamen tegelijk in te stellen:
.masonry {
display: grid;
grid: "a b c" masonry / 50px 100px 200px;
grid-auto-flow: wrap-reverse;
}
In beide voorbeelden is de volgorde strikt noodzakelijk, en anders als je rijen in plaats van rijen zou willen gebruiken. Bijvoorbeeld, het wijzigen naar rijen ziet er als volgt uit:
.masonry {
display: grid;
grid: 50px 100px 200px / masonry;
grid-template-areas: "a" "b" "c";
}
Of, om ze allemaal in één korte notatie samen te vatten:
.masonry {
display: grid;
grid: "a" 50px "b" 100px "c" 200px / masonry;
}
Punten om te overwegen bij de keuze tussen de twee opties
De display: masonry zal waarschijnlijk veel gebruikt worden, aangezien het een relatief eenvoudige afkorting is. In veel gevallen hoeft u voor een "standaard" metselwerklay-out alleen de spoordefinities in te stellen; alle andere waarden kunnen de standaardwaarden aannemen.
De display: grid gebruikt de bestaande grid , een vrij complexe afkorting die naar onze ervaring minder vaak door ontwikkelaars wordt gebruikt. Zoals in de voorgaande voorbeelden is aangetoond, vereist deze zelfs bij eenvoudige metselwerklay-outs zorgvuldigheid bij het instellen van de volgorde van de waarden.
Overige overwegingen
In dit artikel worden enkele veelvoorkomende gebruiksscenario's van vandaag besproken, maar we weten niet wat de toekomst voor grid en masonry in petto heeft. Een belangrijk argument voor het gebruik van de aparte display: masonry syntaxis is dat het de twee in de toekomst de mogelijkheid biedt om van elkaar te divergeren. Met name bij beginwaarden – zoals die voor masonry-template-tracks – kan het nuttig zijn om in masonry iets anders te doen dan in grid. We kunnen de standaardwaarden van grid niet wijzigen als we voor de display: grid versie kiezen, wat onze mogelijkheden in de toekomst zou kunnen beperken.
In deze voorbeelden zie je plekken waar de browser eigenschappen moet negeren die geldig zijn in een grid-layout, maar dan met een masonry-layout. Bijvoorbeeld grid-template-areas , waar de meeste waarden worden genegeerd omdat het een tweedimensionale grid-layout definieert, terwijl we in een masonry-layout slechts één richting volledig definiëren.
Geef uw feedback
Bekijk deze voorbeelden en ook de conceptspecificatie waarin elke versie naast de andere wordt gepresenteerd. Laat ons weten wat je ervan vindt door een reactie achter te laten op nummer 9041 of, als je liever een bericht op je eigen blog of sociale media schrijft, laat het ons dan weten via X of LinkedIn .