Modul 4

Kap 4.2 - Grid för sidlayouter

CSS Grid används när layouten behöver rader och kolumner samtidigt.

Mål

  • Förstå skillnaden mellan flexbox och grid.
  • Kunna skapa kolumner och rader med CSS Grid.
  • Känna igen begrepp som cell, track, line, area och item.
  • Använda repeat, fr, minmax, auto-fit och auto-fill.

Tvådimensionell layout

Grid passar när du vill kontrollera både kolumner och rader. En grid-container innehåller grid-items. Mellan rader och kolumner finns grid lines. Ytan mellan linjerna bildar celler och större områden kan beskrivas som grid areas.

An Interactive Guide to CSS Grid visar CSS Grid med interaktiva exempel. Sidan låter dig se hur kolumner, rader, fr, gap, grid lines och placering förändras när värdena ändras. Den är bra som visuell förklaring när kodexempel känns abstrakta.

En enkel grid

.layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
}

fr betyder fraction, alltså en del av det lediga utrymmet. Här får första kolumnen två delar och andra kolumnen en del.

Så visas grid-template-columns: 2fr 1fr
2fr
huvudinnehåll
1fr
sidokolumn

Första kolumnen får dubbelt så stor del av det lediga utrymmet som andra kolumnen.

repeat och minmax

.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

repeat(3, 1fr) skapar tre lika breda kolumner.

Så visas repeat(3, 1fr)
1fr
1fr
1fr

Alla tre kolumner delar lika på bredden.

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

minmax(14rem, 1fr) säger att varje kolumn minst ska vara 14rem men får växa. auto-fit fyller raden med så många kolumner som får plats.

Så visas repeat(auto-fit, minmax(14rem, 1fr))
Kort 1
Kort 2
Kort 3
Kort 4

Korten får minst 14rem. Om det finns plats hamnar flera kort på samma rad, annars bryts de till nya rader.

auto-fit och auto-fill

Både auto-fit och auto-fill skapar responsiva kolumner. I praktiska kortlayouter passar auto-fit ofta bäst eftersom tomma spår kollapsar och innehållet får mer plats.

Med få kort och bred container syns skillnaden tydligt: auto-fit låter korten växa, medan auto-fill behåller plats för tomma spår.

auto-fit

Tomma spår kollapsar.

Kort 1
Kort 2
Kort 3
Kort 4

auto-fill

Tomma spår behålls.

Kort 1
Kort 2
Kort 3
Kort 4
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

Interaktivt exempel

Ändra värdena och se hur grid-container, grid-items, tracks, cells, gap och areas påverkas.

Tre kolumnspår skapas med repeat(3, 1fr). Varje ruta mellan grid lines är en cell.

1
2
3
4
5
6
7
8
9
.container {
    display: grid;
}

Prova själv

  1. Skapa sex artiklar med rubrik och text.
  2. Lägg dem i en container med display: grid.
  3. Testa först repeat(3, 1fr).
  4. Byt sedan till repeat(auto-fit, minmax(14rem, 1fr)) och ändra fönsterbredden.