CSS Grid Masonry-plassering: Slik lager du Pinterest-lignende layouter

Masonry-layouter, popularisert av plattformer som Pinterest, tilbyr en visuelt tiltalende og plasseffektiv måte å vise innhold av varierende størrelser på. Tradisjonelt krevde det JavaScript-biblioteker for å oppnå denne layouten. Men med fremveksten av CSS Grid, og spesifikt grid-template-rows: masonry-egenskapen (fortsatt eksperimentell, men tilgjengelig i nettlesere som Firefox), har det blitt betydelig enklere og mer ytelseseffektivt å lage masonry-layouter.

Forstå Masonry-layout-algoritmen

Kjerneideen bak en masonry-layout er å arrangere elementer i kolonner og minimere tomrom. I motsetning til et standard rutenett, justeres ikke elementene nødvendigvis perfekt på tvers av rader. Algoritmen fungerer i hovedsak som følger:

1. Beregn kolonnebredder: Bestem det optimale antallet kolonner basert på tilgjengelig skjermbredde og ønsket minimum kolonnebredde. CSS Grids auto-fit- eller auto-fill-nøkkelord i grid-template-columns er avgjørende her.
2. Elementplassering: Iterer gjennom elementene, og plasser hvert element i den korteste kolonnen. Dette sikrer en relativt jevn fordeling av innholdet på tvers av alle kolonnene.
3. Dynamisk justering: Når nettleservinduet endrer størrelse, beregnes kolonnebreddene på nytt, og elementene kan omfordeles for å opprettholde optimal avstand og visuell balanse.

Selv om CSS Grid med grid-template-rows: masonry håndterer trinn 2 og 3 automatisk, hjelper det å forstå den underliggende algoritmen for å optimalisere innholdet og designet ditt for best mulig brukeropplevelse.

Implementering av Masonry-layout med CSS Grid

1. Grunnleggende HTML-struktur

Start med en enkel HTML-struktur. Et container-element vil inneholde alle elementene som skal arrangeres i masonry-layouten.

            <div class="masonry-container">
  <div class="masonry-item"><img src="image1.jpg" alt="Bilde 1"></div>
  <div class="masonry-item"><img src="image2.jpg" alt="Bilde 2"></div>
  <div class="masonry-item"><img src="image3.jpg" alt="Bilde 3"></div>
  <!-- Flere elementer -->
</div>
            

              
                Copy
              
            
          

2. CSS Grid-konfigurasjon

Bruk følgende CSS-regler på container-elementet:

            .masonry-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 10px;
  grid-template-rows: masonry;
}

.masonry-item {
  break-inside: avoid;
}

.masonry-item img {
  width: 100%;
  height: auto;
  display: block;
}
            

              
                Copy
              
            
          

La oss bryte ned CSS-en:

• display: grid;: Aktiverer CSS Grid-layout for containeren.
• grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));: Dette er nøkkelen til å skape responsive kolonner.
• repeat(auto-fit, ...): Oppretter automatisk så mange kolonner som mulig som får plass i containeren. Når containeren er tom, vil kolonnene kollapse.
• repeat(auto-fill, ...): Oppretter automatisk så mange kolonner som mulig som får plass i containeren, og legger til tomme kolonner selv når det ikke er nok elementer til å fylle dem.
• minmax(250px, 1fr): Hver kolonne vil være minst 250px bred. Hvis det er ekstra plass, vil kolonnene utvide seg for å fylle den tilgjengelige plassen proporsjonalt. Juster 250px-verdien basert på dine designkrav.
• Å bruke auto-fill i stedet for auto-fit kan være nyttig hvis du vil at rutenettet skal vise tomme kolonner når det ikke er nok elementer til å fylle den tilgjengelige plassen. I de fleste masonry-layouter foretrekkes imidlertid auto-fit.
• grid-gap: 10px;: Legger til et 10px mellomrom mellom elementene i rutenettet.
• grid-template-rows: masonry;: Dette er den avgjørende egenskapen som aktiverer masonry-layout-algoritmen. Den forteller rutenettet at det skal arrangere elementer på en måte som minimerer vertikalt tomrom. Dette er for øyeblikket eksperimentelt og kan kreve leverandørprefiks i noen nettlesere eller aktivering av eksperimentelle webplattformfunksjoner. Per november 2024 støttes det i Firefox bak et flagg og er under vurdering for standardisering på tvers av nettlesere.
• break-inside: avoid;: Forhindrer at elementer blir delt på tvers av kolonner ved utskrift eller ved bruk av flerkolonne-layouter. Dette er viktig for å holde elementene samlet.
• .masonry-item img: Sikrer at bilder inne i elementene skalerer riktig for å passe til sin container.

3. Håndtering av bilder med varierende sideforhold

Et sentralt kjennetegn ved masonry-layouter er evnen til å håndtere elementer av forskjellige størrelser og sideforhold. Koden ovenfor håndterer det grunnleggende oppsettet, men du vil kanskje justere bildestørrelser eller sideforhold ytterligere for å oppnå ønsket utseende. En tilnærming er å bruke CSS-egenskapen object-fit.

            .masonry-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* eller contain, fill, scale-down */
}
            

              
                Copy
              
            
          

• object-fit: cover;: Beskjærer bildet for å fylle containeren, noe som potensielt kan føre til at deler av bildet går tapt, men sikrer at det dekker hele området.
• object-fit: contain;: Skalerer bildet for å passe inn i containeren, samtidig som sideforholdet bevares. Dette kan resultere i tomme områder inne i elementet.
• object-fit: fill;: Strekker bildet for å fylle containeren, noe som potensielt kan forvrenge bildet.
• object-fit: scale-down;: Skalerer bildet ned til contain hvis det er større enn containeren, ellers vises det i sin opprinnelige størrelse.

Velg den object-fit-verdien som passer best for innholdet og designmålene dine.

Polyfilling for nettlesere uten innebygd støtte

Siden grid-template-rows: masonry fortsatt er eksperimentelt, er det viktig å tilby en fallback for nettlesere som ennå ikke støtter det. Det er her JavaScript-biblioteker kommer inn i bildet. Populære alternativer inkluderer:

• Masonry.js: Et mye brukt og veldokumentert JavaScript-bibliotek spesielt designet for å lage masonry-layouter.
• Isotope: Et mer avansert bibliotek som tilbyr filtrering, sortering og andre funksjoner i tillegg til masonry-layouter.

Her er et grunnleggende eksempel på hvordan du kan integrere Masonry.js:

1. Inkluder Masonry.js: Legg til Masonry.js-biblioteket i HTML-filen din.

            <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
            

              
                Copy
              
            
          

2. Initialiser Masonry: Bruk JavaScript til å initialisere Masonry-layouten etter at DOM-en er lastet.

            <script>
  window.onload = function() {
    var elem = document.querySelector('.masonry-container');
    var msnry = new Masonry( elem, {
      // alternativer
      itemSelector: '.masonry-item',
      columnWidth: 250
    });
  };
</script>
            

              
                Copy
              
            
          

Denne koden velger .masonry-container-elementet og initialiserer Masonry, og spesifiserer elementvelgeren og kolonnebredden. Juster columnWidth-alternativet slik at det samsvarer med minmax-verdien du brukte i CSS-en din.

Betinget lasting

For å sikre at Masonry.js bare lastes når det er nødvendig, kan du bruke funksjonsdeteksjon for å sjekke om nettleseren støtter grid-template-rows: masonry.

            <script>
  if (!('gridTemplateRows' in document.body.style)) {
    // Last Masonry.js hvis CSS Grid masonry ikke støttes
    var script = document.createElement('script');
    script.src = 'https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js';
    script.onload = function() {
      var elem = document.querySelector('.masonry-container');
      var msnry = new Masonry( elem, {
        itemSelector: '.masonry-item',
        columnWidth: 250
      });
    };
    document.head.appendChild(script);
  } else {
      //CSS Grid masonry støttes
      console.log("CSS Grid Masonry støttes!");
  }
</script>
            

              
                Copy
              
            
          

Optimalisering av Masonry-layouter for ytelse

Masonry-layouter kan potensielt påvirke ytelsen hvis de ikke implementeres nøye. Her er noen optimaliseringstips:

• Bildeoptimalisering: Optimaliser bildene dine for nettet for å redusere filstørrelser. Bruk verktøy som TinyPNG eller ImageOptim for å komprimere bilder uten betydelig kvalitetstap. Vurder å bruke responsive bilder med <picture>-elementet eller srcset-attributtet for å servere forskjellige bildestørrelser basert på skjermstørrelse og oppløsning.
• Lazy Loading (utsatt lasting): Implementer utsatt lasting for bilder som ikke er synlige i visningsporten i utgangspunktet. Dette forbedrer den opprinnelige sideopplastingstiden. Bruk loading="lazy"-attributtet på <img>-taggene dine, eller bruk et JavaScript-bibliotek for mer avanserte teknikker for utsatt lasting.
• Virtualisering: For svært store datasett, vurder å bruke virtualiseringsteknikker for å bare gjengi elementene som for øyeblikket er synlige i visningsporten. Dette kan forbedre ytelsen betydelig når man håndterer tusenvis av elementer.
• Debouncing av størrelsesendringshendelser: Når du bruker JavaScript for fallback-implementeringer, bør du bruke 'debounce' på resize-hendelsen for å unngå overdreven omberegning når nettleservinduet endrer størrelse. Dette kan forhindre ytelsesproblemer og forbedre responsiviteten.
• Innholdsprioritering: Prioriter lasting av innhold over bretten (den synlige delen av siden) for å forbedre den oppfattede ytelsen til nettstedet.

Hensyn til tilgjengelighet

Det er avgjørende å sikre at din masonry-layout er tilgjengelig for brukere med nedsatt funksjonsevne. Vurder følgende:

• Semantisk HTML: Bruk semantiske HTML-elementer for å strukturere innholdet ditt logisk. Dette hjelper skjermlesere med å forstå innholdet og navigere effektivt på siden.
• Tastaturnavigasjon: Sørg for at brukere kan navigere i layouten ved hjelp av tastaturet. Test layouten din med kun tastaturnavigasjon for å identifisere potensielle problemer.
• Fokusstyring: Håndter fokusrekkefølgen riktig for å sikre en logisk flyt for tastaturbrukere. Bruk tabindex-attributtet for å kontrollere rekkefølgen elementene mottar fokus i.
• Alternativ tekst for bilder: Gi beskrivende alternativ tekst for alle bilder ved hjelp av alt-attributtet. Dette gjør at skjermlesere kan formidle innholdet i bildene til synshemmede brukere.
• Tilstrekkelig kontrast: Sørg for at det er tilstrekkelig kontrast mellom tekst- og bakgrunnsfarger for å oppfylle tilgjengelighetsstandarder.
• ARIA-attributter: Bruk ARIA-attributter for å gi tilleggsinformasjon til hjelpeteknologier, om nødvendig. Unngå imidlertid overdreven bruk av ARIA-attributter, og bruk alltid semantiske HTML-elementer når det er mulig.

Eksempler på Masonry-layouter i bruk

Masonry-layouter brukes i stor utstrekning på tvers av ulike typer nettsteder:

• Pinterest: Det typiske eksemplet på en masonry-layout, som viser bilder og lenker på en visuelt engasjerende måte.
• Dribbble: En designinspirasjonsplattform som bruker masonry-layouter for å vise designbidrag.
• Etsy: En e-handelsplattform som bruker masonry-layouter for å vise frem produktoppføringer.
• Nyhetsnettsteder: Noen nyhetsnettsteder bruker masonry-layouter for å vise artikler og annet innhold på en dynamisk og visuelt tiltalende måte. Dette lar dem vise et større utvalg av innhold på en enkelt side.
• Porteføljenettsteder: Mange designere og fotografer bruker masonry-layouter for å vise frem arbeidet sitt på en visuelt slående måte.

Avanserte teknikker

1. Dynamisk innholdslasting

Masonry-layouter kan kombineres med teknikker for dynamisk innholdslasting for å skape uendelige rulleopplevelser. Etter hvert som brukeren ruller nedover siden, lastes flere elementer inn og legges til i layouten. Dette kan forbedre brukeropplevelsen betydelig ved å tilby en kontinuerlig strøm av innhold.

2. Filtrering og sortering

Masonry-layouter kan også kombineres med filtrerings- og sorteringsfunksjonalitet for å la brukere enkelt finne innholdet de leter etter. Biblioteker som Isotope gir innebygd støtte for filtrering og sortering av masonry-layouter.

3. Animasjoner og overganger

Å legge til animasjoner og overganger kan forbedre brukeropplevelsen og gjøre layouten mer visuelt tiltalende. Bruk CSS-overganger og -animasjoner for å skape jevne og engasjerende interaksjoner. For eksempel kan du animere opasiteten eller skalaen til elementer etter hvert som de legges til i layouten.

Konklusjon

CSS Grids eksperimentelle masonry-layout-funksjon tilbyr en kraftig og effektiv måte å skape dynamiske og visuelt tiltalende layouter på. Selv om den fortsatt er under utvikling, gir forståelsen av den underliggende algoritmen og tilgjengelige fallbacks deg muligheten til å utnytte denne teknikken for forbedrede brukeropplevelser. Ved å kombinere CSS Grid med JavaScript-biblioteker og optimalisere for ytelse og tilgjengelighet, kan du lage fantastiske masonry-layouter som fungerer på tvers av et bredt spekter av nettlesere og enheter.