4.5 Avansert CSS – Flexbox og Grid

Avansert CSS – Flexbox og Grid

I kapittel 4.3 ble flexbox og grid kort introdusert. Nå skal vi gå i dybden på disse to kraftige layout-modulene i CSS. Flexbox og grid har revolusjonert måten vi lager sideoppsett på – før disse verktøyene fantes måtte utviklere bruke kreative triks med float, tabeller og absolutt posisjonering for å oppnå selv enkle layout.

Flexbox er en endimensjonal layout som jobber langs én akse – enten horisontalt eller vertikalt. Den er perfekt for å fordele plass mellom elementer i en rad eller kolonne, sentrere innhold, og lage navigasjonsmenyer og kortlayout.

CSS Grid er en todimensjonal layout som jobber med både rader og kolonner samtidig. Den er ideell for helhetlige sideoppsett, bildegallerier, dashbord og situasjoner der du trenger presis kontroll over plassering i et rutenett.

Å vite når du skal bruke flexbox og når du skal bruke grid er en viktig ferdighet. Tommelregelen er: bruk flexbox for komponenter og endimensjonal fordeling, bruk grid for sideoppsett og todimensjonale strukturer. I praksis brukes begge ofte sammen i samme prosjekt.

Når du setter display: flex på et element, får du tilgang til flere egenskaper som styrer hvordan barna arrangeres:

flex-direction – Bestemmer retningen på hovedaksen:

.container {
  display: flex;
}

/* Standard: Horisontalt fra venstre til høyre */
.container { flex-direction: row; }

/* Horisontalt fra høyre til venstre */
.container { flex-direction: row-reverse; }

/* Vertikalt fra toppen og ned */
.container { flex-direction: column; }

/* Vertikalt fra bunnen og opp */
.container { flex-direction: column-reverse; }

flex-wrap – Bestemmer om elementene brytes til ny linje:

/* Ikke bryt linjer (standard, elementene krympes) */
.container { flex-wrap: nowrap; }

/* Bryt til ny linje når plassen er full */
.container { flex-wrap: wrap; }

gap – Avstand mellom flex-elementer:

.container {
  display: flex;
  gap: 1rem;        /* Lik avstand i alle retninger */
  gap: 1rem 2rem;   /* rad-avstand kolonne-avstand */
}

De to viktigste justeringsegenskapene i flexbox er justify-content (fordeling langs hovedaksen) og align-items (justering langs kryssaksen).

justify-content – Fordeler plass langs hovedaksen:

.container {
  display: flex;
  justify-content: flex-start;    /* Elementer til venstre (standard) */
  justify-content: flex-end;      /* Elementer til høyre */
  justify-content: center;        /* Elementer sentrert */
  justify-content: space-between; /* Lik avstand mellom, ingen i kantene */
  justify-content: space-around;  /* Lik avstand rundt hvert element */
  justify-content: space-evenly;  /* Helt lik avstand overalt */
}

align-items – Justerer elementer langs kryssaksen:

.container {
  display: flex;
  height: 300px;
  align-items: stretch;     /* Strekk til full høyde (standard) */
  align-items: flex-start;  /* Juster til toppen */
  align-items: flex-end;    /* Juster til bunnen */
  align-items: center;      /* Sentrer vertikalt */
  align-items: baseline;    /* Juster etter tekstens grunnlinje */
}

Sentrering med flexbox – Den enkleste måten å sentrere et element både horisontalt og vertikalt:

.sentrert-container {
  display: flex;
  justify-content: center;  /* Horisontal sentrering */
  align-items: center;      /* Vertikal sentrering */
  height: 100vh;
}

Denne teknikken er ekstremt nyttig og brukes overalt i moderne webdesign. Før flexbox var vertikal sentrering en av de mest frustrerende oppgavene i CSS.

Mens flex-container-egenskapene styrer helheten, kan du også kontrollere individuelle flex-elementer:

flex-grow – Hvor mye et element skal vokse relativt til andre:

.element-a { flex-grow: 1; }  /* Får 1 andel av ledig plass */
.element-b { flex-grow: 2; }  /* Får 2 andeler av ledig plass */
.element-c { flex-grow: 0; }  /* Vokser ikke (standard) */

flex-shrink – Hvor mye et element krymper når plassen er trang:

.element { flex-shrink: 1; }  /* Krymper proporsjonalt (standard) */
.element { flex-shrink: 0; }  /* Krymper aldri */

flex-basis – Startstørrelsen til elementet før vekst/krymping:

.element { flex-basis: 200px; }  /* Starter med 200px bredde */
.element { flex-basis: 30%; }    /* Starter med 30% av containeren */
.element { flex-basis: auto; }   /* Bruker innholdets størrelse (standard) */

flex-shorthand – Kombinerer grow, shrink og basis:

.element { flex: 1; }           /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
.element { flex: 0 0 250px; }   /* Ikke voks, ikke krymp, 250px bred */
.element { flex: 2 1 auto; }    /* Voks dobbelt, krymp normalt, auto basis */

Et vanlig mønster er sidebar-layout med flexbox:

.side-layout {
  display: flex;
  gap: 2rem;
}

.sidebar {
  flex: 0 0 250px;   /* Fast bredde, krymper ikke */
}

.hovedinnhold {
  flex: 1;           /* Fyller resten av plassen */
}

Du oppretter et grid ved å sette display: grid og definere kolonnene:

/* Tre kolonner med fast bredde */
.rutenett {
  display: grid;
  grid-template-columns: 200px 400px 200px;
  gap: 1rem;
}

/* Tre like brede kolonner med fr-enheter */
.rutenett {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}

/* Kortform med repeat() */
.rutenett {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

fr-enheten (fraction) representerer en andel av tilgjengelig plass. I 1fr 2fr 1fr får den midterste kolonnen dobbelt så mye plass som de andre:

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

Rader defineres med grid-template-rows:

.layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;  /* header, innhold, footer */
  gap: 1rem;
  min-height: 100vh;
}

Her er den første og siste raden (header og footer) auto-dimensjonert etter innholdet, mens den midterste raden (innholdet) tar all resterende plass med 1fr.

Du kan plassere elementer manuelt i gridet med grid-column og grid-row:

.rutenett {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto auto;
  gap: 1rem;
}

/* Elementet spenner over kolonne 1 til 3 (to kolonner) */
.bred-element {
  grid-column: 1 / 3;
}

/* Elementet spenner over alle 4 kolonner */
.full-bredde {
  grid-column: 1 / -1;
}

/* Elementet spenner over 2 rader */
.høy-element {
  grid-row: 1 / 3;
}

Du kan også bruke span for å angi antall spor:

.bred-element {
  grid-column: span 2;  /* Spenner over 2 kolonner */
}

.høy-element {
  grid-row: span 3;     /* Spenner over 3 rader */
}

grid-template-areas gir en visuell måte å definere layout på:

.side-layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header  header"
    "sidebar innhold"
    "footer  footer";
  gap: 1rem;
  min-height: 100vh;
}

.header   { grid-area: header; }
.sidebar  { grid-area: sidebar; }
.innhold  { grid-area: innhold; }
.footer   { grid-area: footer; }

Med grid-template-areas kan du «tegne» layouten som en visuell representasjon i CSS-koden. Hvert ord representerer et område, og elementene kobles til områdene med grid-area.

En av de mest nyttige grid-teknikkene er auto-fit og auto-fill med repeat() og minmax(). De lager rutenett som automatisk tilpasser antall kolonner til tilgjengelig plass, helt uten media queries:

/* auto-fit: Tilpasser antall kolonner, strekker eksisterende elementer */
.kort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

/* auto-fill: Tilpasser antall kolonner, beholder tomme spor */
.kort-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

Forskjellen mellom auto-fit og auto-fill:
- auto-fit: Kollapser tomme spor og lar eksisterende elementer strekke seg. Hvis du har tre elementer i en bred container, kan de bli større enn minimum.
- auto-fill: Beholder tomme spor selv om det ikke er elementer som fyller dem. Elementene beholder sin minimale bredde.

I de fleste tilfeller er auto-fit det du vil bruke, fordi det gir et ryddigere resultat uten usynlige tomme kolonner.

minmax(280px, 1fr) betyr at hver kolonne er minst 280px bred, men kan vokse for å dele tilgjengelig plass. Nettleseren beregner automatisk hvor mange kolonner som får plass:
- Viewport 600px: 2 kolonner (ca. 280px hver)
- Viewport 900px: 3 kolonner (ca. 280px hver)
- Viewport 1200px: 4 kolonner (ca. 280px hver)

Dette er en ekstremt kraftig teknikk som gir responsivt design uten en eneste media query.

Både flexbox og grid er layout-verktøy, men de har ulike styrker:

Bruk grid når:
- Du trenger layout med både rader og kolonner
- Du vil plassere elementer presist i et rutenett
- Du lager helhetlige sideoppsett med header, sidebar og footer
- Du lager bildegallerier eller dashbord med ulike kortsstørrelser

Bruk begge sammen:
I praksis bruker du ofte grid for den overordnede sidelayouten og flexbox for komponenter inni grid-cellene. For eksempel kan headeren være en grid-area, mens innholdet inni headeren arrangeres med flexbox.

Flexbox og Grid er de to viktigste layout-verktøyene i moderne CSS:

- Flexbox er endimensjonal og perfekt for å fordele elementer i en rad eller kolonne. De viktigste egenskapene er flex-direction, justify-content, align-items, gap og flex-shorthand.
- CSS Grid er todimensjonal og ideelt for sideoppsett med rader og kolonner. De viktigste egenskapene er grid-template-columns, grid-template-rows, grid-template-areas, gap og fr-enheten.
- auto-fit med minmax() gir responsivt rutenett uten media queries.
- grid-template-areas gir en visuell måte å definere layout i CSS.
- Bruk begge sammen: Grid for overordnet sidelayout, flexbox for komponenter.
- gap er enklere enn margin for avstand mellom elementer i både flexbox og grid.

Med god forståelse av flexbox og grid kan du lage nesten hvilken som helst layout uten å ty til gamle teknikker som float og absolutt posisjonering.