CSS Grid: bygg rutbaserade layouter på webben

CSS Grid: bygg rutbaserade layouter på webben

CSS Grid är ett tvådimensionellt layoutsystem för webbgränssnitt. Till skillnad från äldre metoder som flytande element och flexbox hanterar CSS Grid både kolumner och rader samtidigt, vilket gör det särskilt lämpat för hela sidlayoutar och rutbaserade komponenter.

I den här guiden går vi igenom hur CSS Grid fungerar, hur du skapar en rutcontainer, definierar kolumner och rader, sätter mellanrum och placerar rutobjekt. Guiden är skriven för dig som vill komma igång med CSS Grid i praktiken.

Vad är CSS Grid?

CSS Grid är ett layoutsystem i CSS som låter dig skapa rutbaserade layouter direkt i stylesheeten. En rut består av kolumner och rader som skär varandra, och varje skärning bildar en cell. Du kan placera innehåll i en eller flera celler och styra hur rutorna beter sig på olika skärmstorlekar.

Det som särskiljer CSS Grid från till exempel flexbox är att det är tvådimensionellt. Flexbox är utformat för att lägga ut objekt i en enda dimension — antingen i en rad eller i en kolumn. CSS Grid hanterar båda dimensionerna samtidigt, vilket gör det kraftfullare för övergripande sidlayoutar.

Skapa en rutcontainer

För att börja använda CSS Grid sätter du egenskapen display: grid på ett element. Det elementet blir då en rutcontainer, och dess direkta underordnade element blir automatiskt rutobjekt.

.container {
  display: grid;
}

När ett element har display: grid påverkar det inte bara elementet självt utan även dess direkta barn. Varje direkt underordnat element placeras i rutans celler enligt de regler du sätter upp. Element som inte är direkta barn påverkas inte.

Definiera kolumner och rader

Med egenskaperna grid-template-columns och grid-template-rows bestämmer du hur rutans kolumner och rader ser ut. Du anger storleken på varje spår, och webbläsaren skapar rutstruktur därefter.

Till exempel skapar detta tre kolumner som är lika breda:

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

Enheten fr står för fraction och betyder en del av det tillgängliga utrymmet. 1fr 1fr 1fr delar upp containern i tre kolumner med lika storlek. Du kan blanda fr med fasta enheter som px eller procent, samt nyckelorden auto och funktionen minmax() för att styra hur spår beter sig när innehållet eller skärmstorleken förändras.

För rader fungerar det på samma sätt:

.container {
  display: grid;
  grid-template-rows: auto 200px auto;
}

Här blir den första och sista raden så hög som innehållet kräver, medan mittenraden är fastställd till 200 pixlar.

Sätt mellanrum mellan spåren

Egenskapen gap skapar mellanrum mellan kolumner och rader i rutlayouten. Du kan också använda column-gap för att enbart styra kolumnmellanrum och row-gap för radmellanrum.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

Mellanrummet läggs bara mellan spåren, inte utanför rutans yttre kanter. Det gör gap smidigare än att använda marginaler på varje rutobjekt, eftersom du slipper särskilda regler för första och sista objektet i varje rad.

Placera rutobjekt

Som standard placerar webbläsaren rutobjektet i lediga celler i den ordning de förekommer i koden. Du kan styra placeringen mer exakt med grid-column och grid-row.

Med grid-column anger du vilka vertikala rutlinjer ett objekt ska spänna mellan:

.item {
  grid-column: 1 / 3;
}

Detta placerar objektet från första till tredje rutlinje, vilket innebär att det upptar två kolumner. Samma princip gäller för grid-row i vertikaleden.

Du kan också använda grid-area för att ange både kolumn- och radplacering samtidigt, eller definiera namngivna rutområden med grid-template-areas för en mer beskrivande layoutstruktur.

Justera och aligna innehåll

CSS Grid erbjuder flera egenskaper för att justera innehåll inom rutcellerna och i rutans helhet:

• justify-items styr hur innehåll placeras horisontellt inom varje cell
• align-items styr vertikal placering inom varje cell
• justify-content styr hur hela rutlayouten placeras horisontellt i containern
• align-content styr vertikal placering av hela rutlayouten i containern

Vanliga värden är start, end, center, stretch och space-between. Med dessa kan du styra exakt hur rutobjekt och rutlayouten beter sig när det finns överblivet utrymme.

CSS Grid och responsiv design

CSS Grid fungerar utmärkt tillsammans med medieförfrågningar för att skapa responsiva layouter. Du kan byta rutstruktur beroende på skärmstorlek, till exempel gå från en kolumn på mobiler till flera kolumner på större skärmar.

Om du vill läsa mer om hur olika layoutmetoder samverkar i en responsiv webbplats, finns vår guide om responsiv webbdesign som komplement till den här artikeln.

Vanliga misstag och hur du undviker dem

Ett vanligt misstag är att glömma att bara direkta barn till rutcontainern blir rutobjekt. Om du har omslagselement mellan containern och innehållet du vill placera, fungerar inte rutplaceringen som förväntat.

Ett annat misstag är att sätta fasta höjder på rader utan att tänka på att innehållet kan växa. Använd auto eller minmax() för att ge rader utrymme att expandera när text eller bilder tar mer plats än väntat.

Slutligen bör du inte använda CSS Grid för allt. För enkla komponenter där objekt bara behöver läggas ut i en rad eller kolumn kan flexbox vara ett enklare val. CSS Grid är starkast när du behöver styra både kolumner och rader samtidigt.

Kom igång med CSS Grid

1. Lägg till display: grid på containern.
2. Definiera kolumner med grid-template-columns.
3. Definiera rader med grid-template-rows om det behövs.
4. Sätt mellanrum med gap.
5. Placera enskilda objekt med grid-column och grid-row om standardplaceringen inte räcker.
6. Testa layouten på olika skärmstorlekar med medieförfrågningar.

Med dessa steg har du grunderna på plats för att bygga rutbaserade layouter med CSS Grid.