Masonry-asettelu: CSS- ja JavaScript-tavat

Masonry-asettelu sijoittaa kohteet sarakkeisiin niin, että kukin kohde täyttää seuraavan vapaan pystysuuntaisen tilan Pinterestin tapaan. Sarakkeilla on sama leveys, mutta kohteiden korkeudet vaihtelevat. Tuloksena on tiivis ja visuaalisesti elävä ruudukko, jossa rivien väliin ei jää hukkatilaa.

Chrome ja Firefox tukevat lippuasetuksen takana määritettä grid-template-rows: masonry. Kohteet sijoitetaan sarakkeisiin, mutta rivien korkeus määräytyy niiden sisällön mukaan, joten erikorkuiset kohteet pakkautuvat ilman aukkoja. Tämä on tulevaisuuden natiivi ratkaisu.

CSS Columnsilla voidaan luoda Masonry-tyyppinen asettelu: columns: 3; column-gap: 1rem. Kohteet virtaavat automaattisesti ylhäältä alaspäin kussakin sarakkeessa. Rajoitus on, että kohteet järjestetään sarake kerrallaan (sarakkeen 1 yläosa, sarakkeen 2 yläosa...) eikä rivi kerrallaan, mikä vaikuttaa lukujärjestykseen ja saavutettavuuteen.

Estäkää kohteiden katkeaminen sarakkeiden välillä asettamalla kullekin kohteelle break-inside: avoid. Ilman tätä korkea kortti voi jakautua kahteen sarakkeeseen ja sisältö katketa keskeltä. Lisätkää tämä aina, kun käytätte CSS Columnsia korttimaiseen sisältöön.

David DeSandron kehittämä Masonry.js sijoittaa absoluuttisesti asemoidut kohteet uudelleen laskemalla sarakkeiden korkeudet ja sijoittamalla kunkin kohteen lyhimpään sarakkeeseen. Isotope laajentaa tätä lajittelulla ja suodatuksella. Molemmat tarvitsevat JavaScriptiä sijaintien laskemiseen ja asettamiseen.

Kevyt lähestymistapa on määrittää grid kiinteine sarakkeineen ja yhden pikselin riveineen sekä asettaa kullekin kohteelle JS:llä grid-row-end: span N kohteen sisällön korkeuden ja rivikorkeuden perusteella. Kohteet säilyttävät grid-rivien tasauksen ja voivat silti olla erikorkuisia.

Masonry-sijainnit vanhenevat, kun ikkunan koko muuttuu tai kuvat latautuvat. Käyttäkää ResizeObserveria koonmuutosten havaitsemiseen ja uudelleenlaskennan käynnistämiseen. Viivästyttäkää uudelleenlaskentaa, jotta laskentaa ei tehdä liikaa nopeiden koonmuutosten aikana.

Tuntemattoman korkuiset kuvat pakottavat Masonry-asettelun laskemaan sijainnit uudelleen lataamisen jälkeen. Antakaa kaikille kuville eksplisiittiset width- ja height-määritteet, jotta selain varaa tilan ennen lataamista. Tämä estää sijaintien siirtymistä ja vähentää uudelleenlaskentakertojen määrää.

Kohteiden lisääminen Masonry-asetteluun edellyttää vain niiden sarakkeiden uudelleenlaskentaa, joihin uudet kohteet vaikuttavat, eikä koko gridin laskemista uudelleen. Masonry.js:n kaltaiset kirjastot tukevat lisättyjen kohteiden animointia ja vaiheittaista asettelua ilman koko asettelun laskemista uudelleen jokaisen uuden erän yhteydessä.

Visuaalinen Masonry-järjestys poikkeaa DOM-järjestyksestä, kun asettelu tehdään JavaScriptillä. Varmistakaa, että sarkainjärjestys noudattaa DOM-järjestystä eli loogista lukujärjestystä eikä visuaalista sijaintia. Lisätkää tabindex harkiten tai luottakaa näppäimistönavigoinnissa luonnolliseen DOM-järjestykseen.

CSS Columns on yksinkertainen eikä tarvitse JavaScriptiä, mutta lukujärjestys kulkee sarakkeittain eikä riveittäin, eikä lajittelu tai suodatus ole mahdollista. Grid Masonry ei vielä ole tuotantokäyttöön tuettu. JavaScriptillä toteutettu Masonry on monipuolinen, mutta kasvattaa kokoa ja aiheuttaa renderöintiviiveen, kun sijainnit lasketaan sisällön latauduttua.

Masonry-asettelu voidaan toteuttaa CSS Columnsilla (yksinkertainen, mutta järjestää sisällön sarakkeittain), kokeellisella grid-template-rows: masonry -määritteellä (tulevaisuuteen suuntautuva) tai JavaScript-kirjastoilla, kuten Masonry.js:llä (monipuolinen ja tukee lajittelua sekä suodatusta). Jokainen menetelmä sisältää kompromisseja yksinkertaisuuden, saavutettavuuden ja ominaisuuksien välillä.