Layout

For layout, tilbyr Grunnmuren tailwind utilities som er definert i @obos-bbl/grunnmuren-tailwind. Det er tre hovedkategorier for layout i Grunnmuren:

Container

Klassen container brukes for å gi innholdet padding på sidene, sette en maksimal bredde på innholdet, samt sentrere innholdet horisontalt.

I de aller fleste tilfeller vil vi unngå å plassere innhold helt ut i kanten på denne containeren. Hovedinnholdet skal som regel plasseres sentrert i denne containeren, med en "gutter" på hver side.

Den enkleste måten å få dette riktig er å bruke layout-grid-container, som kombinerer container med et grid-oppsett på 14 kolonner. Innholdet plasseres da i kolonne 2-13 for å få "gutter" på hver side.

Grid

.layout-grid

Grunnmuren sitt grid defineres av klassen layout-grid, og består av 14 kolonner med responsiv spacing mellom kolonnene. Det betyr at størrelsen på kolonnene varierer avhengig av bredden på containeren. For at dette skal fungere optimalt, bør layout-grid enten:

  • Alltid plasseres inne i en container
  • Erstattes med layout-grid-container

De 14 kolonnene gjelder fra og med små skjermer sm: og oppover.

.layout-grid-container

Klassen layout-grid-container kombinerer container og layout-grid for å gi en enkel måte å sette opp et grid med gutters på hver side. Her plasseres også alt innhold mellom kolonne 2 og 13 som default.

Dette kan overstyres ved å sette andre col-start, col-end eller col-span verdier.

Det er viktig å huske på at du må bruke sm: prefixet for kolonneverdier, siden kolonne systemet kun begynner å gjelde fra små skjermer og oppover.

Eksempel på overstyring:

.layout-subgrid-*
Dersom du ønsker å lage et subgrid inne i et eksisterende grid, kan du bruke klassene layout-subgrid-*. Disse klassene oppretter et subgrid som "arver" kolonneoppsettet fra parent-gridet. Dette er en midlertidig løsning frem til det er bedre støtte for subgrid blant nettlesere.
Du kan velge mellom:
  • layout-subgrid-1
  • layout-subgrid-2
  • layout-subgrid-3
  • layout-subgrid-4 
  • layout-subgrid-5
  • layout-subgrid-6
  • layout-subgrid-7
  • layout-subgrid-8
  • layout-subgrid-9
  • layout-subgrid-10
  • layout-subgrid-11
  • layout-subgrid-12
  • layout-subgrid-13
  • layout-subgrid-14 eller layout-subgrid-full
I subgrid må du selv passe på hvilke breakpoints som skal gjelde , siden det kan være forskjellig fra parent gridet. Disse klassene setter altså ikke breakpoints for deg på samme måte som layout-grid layout-grid-container gjør.
Eksempel på bruk:
Spacing
Grunnmuren tilbyr utility-klasser for konsistent og responsiv spacing som kan brukes i blant annet grid-layouts. Disse klassene sørger for at avstanden mellom elementer skalerer riktig på tvers av skjermstørrelser.
.layout-gap-x
Klassen layout-gap-x setter horisontal avstand mellom elementer i et grid. Den kombinerer en base-spacing med responsiv grid-spacing:
  • Base: gap-x-2 (0.5rem)
  • sm: gap-x-4 (1rem)
  • md: gap-x-9 (2.25rem)
  • lg: gap-x-12 (3rem)
  • xl: gap-x-16 (4rem)
.layout-gap-y
Klassen layout-gap-y setter vertikal avstand mellom elementer i et grid. Den er responsiv og øker avstanden på større skjermer:
  • Base: gap-y-4 (1rem)
  • sm: gap-y-6 (1.5rem)
  • md: gap-y-8 (2rem)
  • lg: gap-y-10 (2.5rem)
  • xl: gap-y-12 (3rem)
.layout-grid-gap-x
Klassen layout-grid-gap-x brukes internt av layout-grid og layout-subgrid-* for å sette riktig kolonneavstand. Den kan også brukes direkte dersom du kun ønsker den responsive horisontale grid-spacingen uten base-spacingen fra layout-gap-x. Den har samme responsive verdier som layout-gap-x, men kun fra og med sm: og oppover.
Eksempel på bruk:
I eksempelet over vil layout-grid-container automatisk sette horisontal spacing mellom kolonnene, mens layout-gap-y sørger for responsiv vertikal avstand mellom radene.