Feedback nodig: Hoe moeten we CSS-metselwerk definiëren?

Rachel Andrew

Ian Kilpatrick

Tab Atkins-Bittner

Gepubliceerd: 19 september 2024

De CSS Werkgroep heeft de twee CSS metselwerkvoorstellen samengevoegd tot één conceptspecificatie . De groep hoopt dat dit het gemakkelijker zal maken om de twee te vergelijken en een definitieve beslissing te nemen. Het Chrome-team is nog steeds van mening dat een afzonderlijke metselwerksyntaxis de beste manier zou zijn om verder te gaan. Hoewel het grootste prestatieprobleem dat in ons vorige bericht werd genoemd, is opgelost, zijn er nog steeds zorgen over de syntaxis, beginwaarden en hoe gemakkelijk een versie in combinatie met raster te leren zou zijn.

Om onze aannames echter te testen, hebben we enkele voorbeelden doorgenomen om te laten zien hoe metselwerk bij elke versie zou werken. Bekijk de voorbeelden in dit bericht en geef ons uw feedback, zodat we een beslissing kunnen nemen en door kunnen gaan met deze functie.

Dit bericht behandelt niet alle mogelijke gebruiksscenario's, maar het is duidelijk dat het scheiden van metselwerk en de rasterindeling er niet toe zal leiden dat de functie functionaliteit mist. In feite kan het tegenovergestelde waar zijn. Zoals je in dit bericht zult zien, creëert de display: masonry nieuwe mogelijkheden en een eenvoudigere syntaxis. Bovendien hebben veel ontwikkelaars hun zorgen geuit over de mogelijkheid dat items met metselwerk opnieuw worden geordend, wat toegankelijkheidsproblemen veroorzaakt. Dit wordt ook aangepakt voor beide versies van de syntaxis, via de voorgestelde reading-flow .

Een basislay-out van metselwerk

Dit is de indeling die de meeste mensen zich voorstellen als ze aan metselwerk denken. Items worden in rijen weergegeven en nadat de eerste rij is geplaatst, worden de volgende items verplaatst naar de ruimte die is achtergelaten door kortere items.

Met display: masonry

Om een ​​metselwerkopmaak te maken, gebruikt u de waarde van masonry voor de display eigenschap. Hierdoor ontstaat een metselwerklay-out met kolomsporen die u definieert (of wordt gedefinieerd door de inhoud) en metselwerk in de andere as. Het eerste item wordt weergegeven bij blok- en inline-start (dus linksboven in het Engels), en items worden in de inline-richting opgemaakt.

Om tracks te definiëren, gebruikt u masonry-template-tracks met tracklijstwaarden zoals gebruikt in de CSS-rasterlay-out.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(3, 1fr);
  gap: 10px;
}

Met display: grid

Om een ​​metselwerkopmaak te maken, maakt u eerst een stramienopmaak met de waarde van grid voor de display eigenschap. Definieer kolommen met de eigenschap grid-template-columns en geef grid-template-rows vervolgens de waarde masonry .

Hierdoor ontstaat een lay-out zoals je zou verwachten bij automatisch geplaatste rasteritems, maar de items in elke rij gebruiken een metselwerklay-out en worden opnieuw gerangschikt om ruimte in te nemen die is overgebleven door kleinere items in de voorgaande rij.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  gap: 10px;
}

Aandachtspunten tussen de twee opties

Een opmerkelijk verschil tussen deze methoden is dat u met de display: masonry -versie een metselwerklay-out krijgt, zelfs als u geen sporen opgeeft met masonry-template-tracks . Laat daarom display: masonry is wellicht alles wat u nodig heeft. Dit komt omdat de initiële waarde van masonry-template-tracks repeat(auto-areas, auto) is. De lay-out creëert zoveel tracks met automatisch formaat als er in de container passen.

Omgekeerde stroming met metselwerk

De specificatie omvat manieren om de richting van de metselwerkstroom te veranderen. U kunt bijvoorbeeld de stroom wijzigen zodat deze vanaf het blok naar boven wordt weergegeven.

Met display: masonry

Maak een metselwerkindeling 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 metselwerklay-out met display: grid en grid-template-rows: masonry . Gebruik vervolgens de eigenschap grid-auto-flow met de nieuwe waarde row-reverse om ervoor te zorgen dat de items worden opgemaakt vanaf het blokuiteinde van de rastercontainer.

.masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: masonry;
  grid-auto-flow: row-reverse;
}

Aandachtspunten tussen de twee opties

Het display: masonry lijkt erg op hoe flexbox werkt. Wijzig de richting waarin kolommen stromen met behulp van de eigenschap masonry-direction met de waarde column-reverse .

De CSS-rasterversie maakt gebruik van grid-auto-flow . Zoals momenteel gedefinieerd, zou grid-auto-flow: row-reverse en grid-auto-flow: column-reverse hetzelfde effect geven. Dit kan verwarrend zijn, omdat je zou verwachten dat ze iets anders doen.

Metselwerk voor rijen

U kunt ook van richting veranderen om rijen te definiëren.

Met display: masonry

Maak een metselwerkindeling met display: masonry en stel vervolgens de waarde van masonry-direction in op row . Tenzij u wilt dat uw rijen een specifieke blokgrootte hebben, hoeft u geen spoorgrootte op te geven, aangezien de standaardwaarde auto is. De grootte van de sporen wordt daarom aangepast 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);
}

Aandachtspunten tussen de twee opties

Net als bij omgekeerde stroming betekent het wijzigen van de display: masonry van kolommen naar rijen het wijzigen van de waarde van masonry-direction . Met de rasterversie moet u de waarden van de eigenschappen grid-template-columns en grid-template-rows wijzigen. Of, als u de afkorting gebruikt, wijzigt u de volgorde van de syntaxis.

Met beide voorbeelden van schakelende stroom voelt de display: masonry intuïtiever aan. Er is één eigenschap die de masonry-direction regelt. Deze heeft een van de volgende waarden nodig:

• row
• column
• row-reverse
• column-reverse

Vervolgens voegt u alle benodigde informatie over de afmetingen toe aan masonry-template-tracks , ervan uitgaande dat de standaard automatische waarde niet is wat u nodig heeft.

Met raster moet u, om de omgekeerde richting uit te voeren, de eigenschap grid-auto-flow gebruiken, en om het rijmetselwerk uit te voeren, moet u de waarde van de eigenschappen grid-template-* wijzigen. Het is in de huidige rastersyntaxis ook niet mogelijk om de waarde voor de rasteras ongedefinieerd te laten. U moet altijd grid-template-* eigenschappen opgeven op de as die geen waarde van masonry heeft.

Plaats artikelen

In beide versies kunt u items expliciet positioneren met behulp van de lijngebaseerde plaatsing die u kent uit de rasterindeling. In beide versies kunt u alleen items in de rasteras positioneren, dit is de as met de vooraf gedefinieerde sporen. U kunt geen items positioneren op de as die de metselwerkindeling doet.

Met display: masonry

De volgende CSS definieert een metselwerkindeling met vier kolommen. De rasteras bestaat daarom uit kolommen. Het item met klasse a wordt van de eerste kolomlijn naar de derde kolomlijn geplaatst, over twee sporen met de nieuwe masonry-track-* eigenschappen. Dit kan ook worden gedefinieerd als een afkorting 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 metselwerkindeling met vier kolommen. De rasteras bestaat daarom uit kolommen. Het item met klasse a wordt geplaatst van de eerste kolomlijn naar de derde kolomlijn, over twee sporen met de eigenschappen grid-column-* . Dit kan ook worden gedefinieerd als een afkorting van grid-column: 1 / 3; .

Als de rasteras uit kolommen bestaat, worden de eigenschappen grid-row-* genegeerd, en als de rasteras uit rijen bestaat, 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;
}

U kunt benoemde regels met beide syntaxis gebruiken. De volgende voorbeelden tonen een raster met twee kolomlijnen met a naam .

Met display: masonry

De benoemde lijnen worden gedefinieerd in de spoorlijstwaarde van masonry-template-tracks . Het item kan na elke regel met de naam a

.masonry {
  display: masonry;
  masonry-template-tracks: 100px [a] auto [a] auto 100px;
}

.item {
  masonry-track: a;
}

Met display: grid

De benoemde lijnen worden gedefinieerd in de tracklistwaarde van grid-template-columns . Het item wordt na de eerste regel met de a . Als de grid-row -eigenschap 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 */
}

U kunt ook benoemde gebieden in beide syntaxis gebruiken. De volgende voorbeelden tonen een raster met drie tracks genaamd "a", "b" en "c".

Met display: masonry

De sporen worden genoemd als de waarde van masonry-template-areas . Omdat er geen spoorgroottes zijn gedefinieerd, zijn alle drie standaard ingesteld op auto formaat. Het item wordt op het spoor "a" geplaatst.

.masonry {
  display: masonry;
  masonry-template-areas: "a b c";
}

.item {
  masonry-track: a;
}

Dit werkt hetzelfde, ongeacht of u rijen of kolommen definieert; het enige verschil zou de eigenschap masonry-direction zijn.

Met display: grid

Voor kolommen is de syntaxis in wezen identiek. Op dezelfde manier, omdat er geen spoorgroottes zijn gedefinieerd, zijn ze alle drie standaard ingesteld op auto formaat, maar je moet nog steeds expliciet zeggen dat de andere as metselwerk is:

.masonry {
  display: grid;
  grid-template-areas: "a b c";
  grid-template-rows: masonry;
}

.item {
  grid-column: a;
}

Voor rows moet de waarde echter anders worden geschreven, omdat grid-template-areas feitelijk een tweedimensionaal gebied definieert, en elke rij als een afzonderlijke string 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;
}

Aandachtspunten tussen de twee opties

Bij elke positionering werkt de display: masonry beter als het gaat om het schakelen van richting. Omdat de eigenschap masonry-track-* werkt in welke richting dan ook van de rasteras, hoeft u alleen maar de waarde van masonry-direction te wijzigen om van richting te veranderen. Bij de grid-versie heb je in ieder geval redundante eigenschappen nodig om het schakelen mogelijk te maken. Zie echter de voorgaande voorbeelden voor andere manieren waarop het veranderen van richting ingewikkelder is bij de rasterversie.

Afkortingen

In dit bericht zijn de longhands gebruikt om duidelijker te maken welke eigenschappen in gebruik zijn, maar zowel de display: masonry als display: grid -versies kunnen worden gedefinieerd met behulp van shorthands.

Met display: masonry

De display: masonry steno gebruikt het trefwoord masonry . Gebruik de volgende CSS om de basislay-out van het metselwerk te maken:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr);
}

Zo maakt u een eenvoudige, op rijen gebaseerde metselwerkindeling:

.masonry {
  display: masonry;
  masonry: row;
}

Om sporen en een op rijen gebaseerde lay-out te definiëren met de steno:

.masonry {
  display: masonry;
  masonry: repeat(3, 1fr) row;
}

Met display: grid

Om de basislay-out van het metselwerk te maken met behulp van het grid .

.masonry {
  display: grid;
  grid: masonry / repeat(3, 1fr);
}

Zo maakt u een eenvoudige, op rijen gebaseerde metselwerkindeling:

.masonry {
  display: grid;
  grid: repeat(3, auto) / masonry;
}

In complexere voorbeelden kunnen, omdat de algehele syntaxis display:masonry eenvoudiger is, meer eigenschappen samen in de steno worden verpakt zonder dat het al te complex wordt.

Stel je bijvoorbeeld voor dat je drie kolommen maakt, genaamd "a", "b" en "c", gevuld van onder naar boven.

Met display:masonry

In display: masonry , deze drie kunnen in het kort samen gesteld worden:

.masonry {
  display: masonry;
  masonry: column-reverse "a b c";
}

Omdat ze automatisch worden aangepast, hoeft u de maten niet op te geven, maar als u in plaats daarvan een specifiek formaat wilt, kan dat worden toegevoegd. Bijvoorbeeld: masonry: column-reverse 50px 100px 200px "ab c"; .

Bovendien kan elk onderdeel vrijelijk worden nabesteld; er is geen specifieke volgorde die u moet onthouden. En als u in plaats daarvan rijen wilt gebruiken, hoeft u alleen maar column-reverse te verwisselen met row of row-reverse ; de rest van de syntaxis blijft hetzelfde.

Met display: grid

In 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 hierdoor alle kolommen auto op maat gemaakt, maar als u expliciete afmetingen wilt opgeven, kunt u dat doen:

.masonry {
  display: grid;
  grid: masonry / 50px 100px 200px;
  grid-template-areas: "a b c";
  grid-auto-flow: wrap-reverse;
}

Of als u 'raster' wilt gebruiken om de afmetingen en gebiedsnamen allemaal samen 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 vereist, en anders als u in plaats daarvan rijen wilt. Het wijzigen naar rijen ziet er bijvoorbeeld als volgt uit:

.masonry {
  display: grid;
  grid: 50px 100px 200px / masonry;
  grid-template-areas: "a" "b" "c";
}

Of, om ze allemaal in één steno samen te vatten:

.masonry {
  display: grid;
  grid: "a" 50px "b" 100px "c"  200px / masonry;
}

Aandachtspunten tussen de twee opties

De display: masonry zal waarschijnlijk op grote schaal worden gebruikt, aangezien het een relatief eenvoudige afkorting is. In veel gevallen stelt u voor een "standaard" metselwerkindeling alleen de spoordefinities in; alle andere waarden kunnen de standaardwaarde aannemen.

De display: grid -versie gebruikt de bestaande grid afkorting, wat een vrij complexe afkorting is en naar onze ervaring minder vaak wordt gebruikt door ontwikkelaars. Zoals u in de voorgaande voorbeelden kunt zien, is er zelfs bij gebruik voor eenvoudige metselwerkindelingen zorg nodig bij het instellen van de volgorde van de waarden.

Andere overwegingen

In dit bericht worden enkele veelvoorkomende gebruiksscenario's van vandaag bekeken, maar we weten niet wat de toekomst in petto heeft voor rasters of metselwerk. Een groot argument voor het gebruik van de afzonderlijke display: masonry is dat de twee in de toekomst kunnen uiteenlopen. Met name bij initiële waarden, zoals die voor masonry-template-tracks , kan het nuttig zijn om in metselwerk iets anders te doen dan in het raster. We kunnen de standaardinstellingen van het raster niet wijzigen als we de display: grid gebruiken, dit zou dingen kunnen beperken die we in de toekomst zouden willen doen.

In deze voorbeelden ziet u plaatsen waar de browser eigenschappen moet negeren die geldig zijn in het raster bij gebruik van metselwerk. Bijvoorbeeld grid-template-areas , waar de meeste waarden doorkomen omdat het een tweedimensionale rasterindeling definieert, definiëren we in metselwerk slechts één richting volledig.

Geef uw feedback

Bekijk deze voorbeelden eens, en ook de conceptspecificatie waarin de ene versie naast de andere staat. Laat ons weten wat u ervan vindt door te reageren op nummer 9041 of, als u liever een bericht op uw eigen blog of op sociale media schrijft, laat het ons dan zeker weten op X of LinkedIn .