CSS-utvidelse skal gjøre det mye enklere å få til «masonry layout» på weben

«Masonry layout» er en utforming som er også populær å bruke i apper og på weben, ikke minst der hvor man ønsker å vise bildesamlinger hvor bildene har varierende høyde-/breddeforhold. For å få det til å se jevnt ut, brukes gjerne faste kolonner som fylles opp nedenfra, samtidig som den horisontale avstanden mellom hvert av bildene er fast. Det er altså ingen faste rader i en slik layout.

Et godt eksempel på dette finner man på nettstedet til Pinterest. Her vises bilder med ulike høyde- og breddeforhold om hverandre, samtidig som avstanden mellom bildene er (omtrent) like stor overalt.

Foreløpig må man bruke løsninger basert på for eksempel JavaScript eller CSS Multi-column Layout for å få til dette.

En ny layoutmodus

Snart kan dette bli betydelig enklere å få til med en kommende utvidelse til CSS Grid Layout. Spesifikasjonen for dette er på utkastnivå og heter CSS Grid Layout Module Level 3. Det den bringer på banen, er nettopp «masonry layout» som en ny layoutmodus for grid-konteinere.

I praksis opprettet man en grid-konteiner på vanlig måte, med CSS-regler for kolonnene (grid-template-columns) i konteineren og avstanden (gap) mellom barneelementene inne i konteineren.

I en slik container vil i utgangspunktet barneelementene (for eksempel bilder) vises fra venstre mot høyre inntil bredden på den øverste raden er fylt opp. Det neste barneelementet vil så vises helt til venstre på en ny rad i konteineren, og så fylles denne raden opp mot høyre. Og slik fortsetter det. På hver rad vil elementene være stilt vertikalt på linje, som på illustrasjonen under.

Men så kan man ta i bruk følgende CSS-regel:

Da blir layouten ovenfor seende slik ut:

Den øverste raden vises likt i de to eksemplene, men fra og med den andre raden med barneelementer går nettleseren i det nederste eksempelet i gang med å tette de vertikale tomrommene. Dette gjør den blant annet å flytte rundt på barneelementene slik at kolonnene i stor grad fylles opp likt.

Kan aktiveres i Firefox

I virkeligheten er det nøyaktig den samme CSS-koden som er brukt i de to eksemplene. Men det øverste er vist i Chrome, som så langt ikke støtter masonry layout, mens det nederste er vist i Firefox, hvor støtten for masonry layout kan aktiveres ved å sette flagget:

layout.css.grid-template-masonry-value.enabled til verdien true.

CSS-koden til eksemplene over, er:

HTML-koden er:

Kildekoden har vi lånt fra denne artikkelen hos Mozilla. Der er det også mulig å se hvordan koden gjengis i praksis av ulike nettlesere.

I eksemplene over har barneelementene fast bredde og ulike høyde. Det er også mulig å gjøre det motsatt, slik at man får faste rader istedenfor faste kolonner.

«Pakkefunksjonen» kan skrus av

Noen ganger kan det være ønskelig at barneelementene vises i den rekkefølgen de er oppgitt i HTML-koden, framfor å prioritere mest mulig jevn høyde på radene. Dette kan oppnås ved å sette inn følgende linje i CSS-koden over:

Da blir det hele seende slik ut:

Standardverdien til masonry-auto-flow er for øvrig pack.

Det er uvisst hvor raskt de ulike nettleser vil få støtte for masonry layout. Så langt tyder alt på at det kun er Firefox som har fått på plass en viss støtte for dette.

Uansett dreier det seg om et utkast til en spesifikasjon. Veien er lang før spesifikasjonen eventuelt blir en offisiell standard. Men det er mer regelen enn unntaket at nettlesere støtter nye webteknologier før de har rukket å bli webstandarder.