Grid
Bruk av grid
Vi bruker et grid til å styre layouten på sidene våre. På små skjermer er gridet på 4 kolonner, på mellomstore skjermer 6 kolonner og på store skjermer 12 kolonner.
Du kan la kolonner være bredere på små skjermer og smalere på mindre skjermer:
En rad kan ha mange forskjellige bakgrunnsfarger:
En kolonne kan også ha bakgrunnsfarger. De vil da være utfallende, slik at selve innholdet vil forholde seg til griden.
Grid
Gridet består av tre komponenter - <Grid />, <GridRow /> og <GridCol /> - grid, rad og kolonne.
Det kan være mange grids per side, men man kan ikke ha grids inni andre grids. Grid-komponenten brukes til å lage layout på side-nivå.
Det finnes en rekke modifiers på alle tre komponentene som lar deg manipulere hvor innholdet skal plassere seg i en kolonne. Ta en titt på prop-types for å finne disse.
Merk at designet for layout skal være basert på 4 kolonner på sm skjermer, 6 på md og 12 på lg mens i APIet til GridCol sendes det inn
tall fra 0-12 for alle størrelsene. I praksis betyr det at man selv må konvertere fra 12 kolonner til riktig antall på sm og md. For
sm innebærer det at hver kolonne har bredde 3, slik at man må bruke multiplum av 3 for alle verdier som sendes inn til cols eller offset
propertyene. For md har hver kolonne bredde 2 og man må bruke multiplum av 2.
Riktig, oppgitte verdier er multiplum av 3 for sm og 2 for md:
<Grid>
<GridRow>
<GridCol sm={{ cols: 6, offset: 3 }} md={{ cols: 4, offset: 4 }} />
</GridRow>
</Grid>Galt:
<Grid>
<GridRow>
<GridCol sm={{ cols: 2, offset: 3 }} md={{ cols: 5, offset: 4 }} />
</GridRow>
</Grid>Det blir varslet om dette til console.error i dev-versjonen av FFE, men det er ingen varsler om man bygger prod-versjonen av koden.
Selvom det fungerer å bruke andre verdier er det ikke meningen at man skal gjøre, og side-layout skal heller ikke være basert på at man
må gjøre det annerledes.
Spacing
Det er i utgangspunktet ingen luft over eller under gridet. Mellom kolonnene (og til høyre og venstre for griden) er det imidlertid et mellomrom på 16px. Disse verdiene kan overstyres med modifiere.
Margin og padding
Margin og padding kan legges til i topp og bunn av en <GridRow> med modifierne margin og padding. Tillatte verdier samsvarer med felles variabler for spacing i ffe. Eksempel med 64px margin og 8px padding:
<Grid>
<GridRow margin="3xl" padding="sm">
<GridCol />
</GridRow>
</Grid>Sentrering
Innholdet i kolonner kan sentreres i begge akser ved hjelp av center-propen, eller man kan sentrere tekst med centerText.
<Grid>
<GridRow>
<GridCol centerText={true} center={true}>
Sentrert kolonne
</GridCol>
</GridRow>
</Grid>Gap
Mellomrommet mellom kolonnene internt i et grid er 16px som default. Tilsvarende luft finnes til høyre og venstre for gridet. Dette kan overstyres ved hjelp av gap-modifieren på <Grid>. Tillatte verdier samsvarer med felles variabler for spacing i ffe, men kan ikke være større enn 32px (lg). I tillegg kan spacingen fjernes helt med verdien none.
<Grid gap="none">
<GridRow>
<GridCol />
</GridRow>
</Grid>Responsiv spacing
Spacing kan også defineres responsivt ved hjelp av størrelsesmodifierne sm, md og lg. Dette gjør det mulig å ha ulik spacing på ulike skjermstørrelser. Props som kan endres på denne måten er gap på <Grid>-elementet, samt margin og padding på <GridRow>. Tillatte verdier er tilsvarende som for de ikke-responsive variantene av gap, margin og padding.
Et eksempel på responsiv spacing på et grid med progressiv økning av gap og margin/padding kan se slik ut:
<Grid sm={{ gap: 'sm' }} md={{ gap: 'md' }} lg={{ gap: 'lg' }}>
<GridRow sm={{ margin: 'sm', padding: 'sm' }} md={{ margin: 'md', padding: 'md' }} lg={{ margin: 'lg', padding: 'lg' }}>
<GridCol>
...
</GridCol>
</GridRow>
</Grid>De responsive og ikke-responsive spacing-verdiene kan også kombineres. Responsive verdier overstyrer de ikke-responsive, som betyr at de ikke-responsive verdiene i praksis er default.
<GridRow margin="xs" sm={{ margin: 'sm' }} md={{ margin: 'md' }} lg={{ margin: 'lg' }} />Offset
Kolonner kan gis innrykk ved hjelp av offset-propertyen. I praksis fungerer dette slik at gridet hopper over X antall kolonner før innholdet vises. Dette betyr blant annet at man kan sentrere grids med innhold som strekker seg over færre enn 12 kolonner.
Propertyen settes på <GridCol> i første kolonne i gridet som skal vises med innrykk. Verdien tilsvarer antall kolonner som skal hoppes over. Den må defineres for hver skjermstørrelse, samtidig som man definerer kolonnens bredde. Større skjermstørrelser arver verdien fra mindre. For eksempel vil offset som defineres i skjermstørrelse sm også gjelde for md og lg:
<Grid>
<GridRow>
<GridCol sm={{ cols: 6, offset: 2 }}>innhold</GridCol>
</GridRow>
</Grid>For å sentrere gridets innhold må man passe på at totalen av (offset x 2) og cols går opp i 12. For eksempel kan innhold over 8 kolonner løses slik:
<GridCol sm={{ cols: 8, offset: 2 }}>innhold</GridCol>De to siste kolonnene i gridets totale bredde på 12 vil da være tomme, og på den måten skape lik spacing på begge sider.
|----|----|----|----|----|----|----|----|----|----|----|----|
| | |xxxx|xxxx|xxxx|xxxx|xxxx|xxxx|xxxx|xxxx| | |
|----|----|----|----|----|----|----|----|----|----|----|----|