HTML-elementet eller React-komponenten som lager Grid-elementet
An override of the default HTML tag.
Can also be another React component.
children?
ReactNode
Innholdet til Grid-containeren
className?
string
Ekstra klassenavn
GridItem
Navn
Type
Default-verdi
Beskrivelse
small?
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
1
Antall kolonner en Item bruker på små flater (og oppover)
medium?
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Antall kolonner en Item bruker på medium flater (og oppover)
large?
1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
Antall kolonner en Item bruker på store flater.
as?
string | React.ElementType
HTML-elementet eller React-komponenten som lager Grid-elementet
An override of the default HTML tag.
Can also be another React component.
children?
ReactNode
Innholdet til Grid containeren/item
className?
string
Ekstra klassenavn
Vår grid går etter prinsippet om 12 kolonner. Hver GridContainer har 12 kolonner, og hver GridItem tar opp så mange kolonner man skulle ønske.
Grid baserer seg på tre forskjellige breakpoints: small, medium og large, som utledes fra breakpoints-tokens i.e. 800px og 1200px. Disse fungerer dra fra og med en skjermbredde og oppover. Det vil si, hvis ingen large eller medium verdi er satt, så ser Grid etter hvilken small verdi som er satt.
Så om du ikke skal bruke de responsive funksjonene til Grid, benytt small når du setter størrelser på GridItem'er.
Navngivningen til spacing-verdiene følger samme konvensjon som spacing-tokens.
Det vil si f.eks. extraSmall2 for xxs (tskjorte)
Eksempler
Responsivitet
Endre bredden på browser-vinduet for å teste responsiviteten.
