Blogg

Grunder i CSS Grid

  • 05 oktober 2018
  • 2

Älskar du flexbox? Oavsett så kommer du definitivt att älska grid! Den senaste layoutmodellen, grid, är till skillnad från flexbox tvådimensionell och du får kraftfulla verktyg som kan påverka både rader och kolumner. Med verktygen i CSS Grid öppnas det upp för flera möjligheter som underlättar ditt arbete med att skapa snygga och välgjorda layouter.

Artikelverktyg:

Jag kommer att gå igenom grunderna för hur du kan sätta upp en enkel och användbar layout med grid. Utöver det kommer jag att beskriva en del nya funktioner och även en ny enhet som är framtagen just för grid.

Webbläsarstöd

CSS Grid lanserades i mars 2017 och kort därefter hade flera webbläsare (Chrome, Firefox och Safari)  släppt versioner med fullt stöd för specifikationen, och i oktober 2017 följde även Edge efter.

Även om de allra flesta webbläsare som används nu har stöd för CSS Grid kvarstår frågan om vad som händer i IE 11 och andra äldre webbläsare. I fallet med IE 11 har du alternativet att använda ms-prefix eller i stället använda någon annan layoutmetod som har bättre stöd, men det beror på ditt projekt. Det finns en hel del att säga om det här och det är ett kapitel i sig. Jag kommer inte djupdyka i det här utan jag rekommenderar att ni ser när Jen Simmons förklarar mer ingående om hur man kan tänka: Internet Explorer + CSS Grid????. Ha i åtanke att videon spelades in innan grid hade stöd i Edge.

Grunderna

När du skapar en grid krävs en behållare (förälder) som sluter om x antal element (barn). När du skapar en grid-förälder påverkas endast barnen till den föräldern – barnbarn eller djupare nästlade barn till föräldern kommer alltså inte att påverkas alls.

Linjen som är runt de färgglada elementen i bilderna som följer kan du bortse från. Den har ingenting med grid att göra utan är endast med för att du lättare ska förstå hur grid fungerar.

Du definierar din grid med att sätta display till grid i din förälder: 

    <style>
        .grid {
            display:grid;
        }
    </style>
 
    <div class="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>

 

Rader och kolumner (tracks)

För att din layout ska bete sig tvådimensionellt behöver du rader och kolumner som bestämmer hur dina element ska placeras – i detta fall finns det 5 element.

Med grid-template-columns bestäms hur många kolumner det ska finnas på en rad. För att få 3 stycken kolumner med bredden 150px på varje rad kan man göra så här:

    .grid {
        display:grid;
        grid-template-columns:150px 150px 150px;
    }

Du kan även ha mellanrum mellan dina rader och kolumner som du skapar med grid-gap , men jag kommer att fortsätta mina exempel utan grid-gap för enkelhetens skull.

    .grid {
        display:grid;
        grid-template-columns:150px 150px 150px;
        grid-gap:10px;
    }

Tidigare skrev jag att grid är en tvådimensionell layout, men jag har i det här fallet inte definierat hur mina rader ska se ut. Hur kan det fungera ändå?

Explicit & implicit grid

Två begrepp som är viktiga inom CSS Grid är explicit och implicit. När du definierar antingen kolumner eller rader kommer den implicita griden automatiskt att fylla på med rader eller kolumner för att kunna skapa den tvådimensionella layouten. När det sker betraktas din layout som en implicit grid, som i exemplet ovan.

De rader som inte är angivna är automatiskt skapade. Självklart finns alternativet att påverka dem också genom att använda grid-auto-rows. Samma princip funkar med kolumner också (grid-auto-columns).

Har du däremot angett både rader och kolumner får du en explicit grid som du ser i exemplet nedan: 

    .grid {
        display:grid;
        grid-template-columns:150px 150px 150px;
        grid-template-rows:150px 150px;
    }

Ny enhet

Måtten i de exempel jag har visat ovan är angivna i pixlar, men vi vill även ha möjligheten att göra layouten flexibel. Med CSS Grid kom inte bara nya funktioner utan en helt ny enhet vid namn fractions med förkortningen fr. Syftet med fractions är att göra layouten flexibel. Det fractions gör är att ta upp tomrummen och fördela det med antalet fractions som är givet. Se nedan för exempel.

Varje rad har 3 kolumner vardera. Varje fraction kommer att ta 1/3 av den tillgängliga ytan på raden och tilldela den till en kolumn. 

    .grid {
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
    }

Nya funktioner

Med CSS Grid kom det flera nya funktioner, bland annat repeat() och minmax(). Anledningen till att jag nämner just de här två är för att de fungerar väldigt bra i kombination med varandra. Din layout kan ha väldigt många kolumner och med CSS Grid kan du med hjälp av repeat() ange hur många kolumner och rader det ska vara: 

    repeat(<antal>, <storlek>);

 

Utan repeat():

    .grid {
        display:grid;
        grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr;
    }

Med repeat(): 

    .grid {
        display:grid;
        grid-template-columns:repeat(6, 1fr);
    }

minmax() är en annan funktion som kommer att vara användbar för din layout. Du sätter helt enkelt ett minimum och maximum för hur stor din kolumn eller rad ska vara.

    minmax(<minsta storlek>, <största storlek>);

 

Smidigt nog kan du kombinera repeat() och minmax() som i exemplet nedan:

    .grid {
        display:grid;
        grid-template-columns:repeat(3, minmax(50px, 100px);
    }

I det här fallet har jag 3 kolumner som alla blir minst 50px breda och högst 100px breda.

Positionering

Hittills har vi gått igenom det mest grundläggande för att skapa en layout med grid. Men vad vore en layout om du inte kan placera om och vara lite kreativ i din layouts utseende?

Notera att med linje-baserad positionering flyttas endast element visuellt och inte i DOM:en. Det gör att om man tangentbordsnavigerar eller använder skärmläsare kan den logiska ordningen skilja sig från den visuella vilket kan bli förvirrande. Så använd det med förnuft.

När du ska ändra positionen av dina element behöver du utgå från x-axeln (kolumner) och y-axeln (rader). Det första elementet har positioneringen 1 i x-axeln och 1 i y-axeln, se bild nedan:

När du vill flytta ett element behöver du ange start-positionen och slut-positionen, se nedan: 

    .grid div:nth-child(1) {
        background-color:#f0c22d;
        grid-column-start:1;
        grid-column-end:3;
    }

 

Det som skedde nu var att mitt element som ligger först ska börja där kolumn 1 startar och sluta där kolumn 3 börjar, vilket innebär att det kommer att sträcka sig och fylla upp två kolumner i layouten. Med samma princip kan du ändra raders positionering också. 

    .grid div:nth-child(1) {
        background-color:#f0c22d;
        grid-row-start:1;
        grid-row-end:3;
    }

 

Ersätta flexbox med grid?

Grid öppnar upp många möjligheter som flexbox inte kan erbjuda. Därför kan det bli enkelt att tänka sig att ersätta flexbox med grid. Här tror jag på sunt förnuft och att fundera ut syftet med din layout. Flexbox och grid är fantastiska på olika saker och de kan fungera bättre eller sämre beroende på ditt ändamål. Sluta inte använda flexbox bara för att grid finns utan tänk igenom först vilket verktyg som passar din layout bäst.

Jag har bara visat en väldigt liten del av vad grid är kapabel till att göra. Har du börjat få tycke för grid och/eller vill utforska mer tycker jag att du ska gå in på Grid by Example för att lära dig mer om hur grid kan underlätta ditt arbete. 

Vill du veta mer om hur vi arbetar med gränssnittsutveckling på NetRelations?

Tveka inte att ta en kontakt med oss via formuläret så berättar vi gärna mer.

2 kommentarer

Skriv kommentar

Wow whoever wrote this guide is a pro!

Maria - du är grym!