Grid brukes for toaksekontrollert layout med rader og kolonner. Det passer til sideoppsett, dashbord og skjemaer der innholdet skal justeres langs begge akser samtidig.
du trenger et enkelt rad- eller kolonnebasert oppsett uten behov for toaksekontroll, bruk Flex i stedet
Standard Grid bruker 12 likebrede kolonner (repeat(12, 1fr)). Bruk GridItem med colSpan for å angi hvor mange kolonner hvert element skal bruke. Summen av colSpan-verdiene i én rad bør summere til 12 for å fylle hele bredden.
Et vanlig oppsett er innhold på 8 kolonner og et sidefelt på 4 kolonner. På smale skjermer stables de vertikalt ved å gi begge colSpan={12}.
Prop-en gap setter avstand mellom rader og kolonner med designsystemets spacing-skala. Standard er "m". Bruk rowGap og columnGap for å skille mellom radavstand og kolonneavstand.
Alle propser – inkludert colSpan og templateColumns – støtter responsive objekter med brekkpunktene base (mobil), s (600px), m (800px), lg (1200px) og xl (1400px).
<Grid gap="m">
<GridItem colSpan={12}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>12</div></GridItem>
<GridItem colSpan={6}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>6</div></GridItem>
<GridItem colSpan={6}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>6</div></GridItem>
<GridItem colSpan={4}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>4</div></GridItem>
<GridItem colSpan={4}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>4</div></GridItem>
<GridItem colSpan={4}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>4</div></GridItem>
<GridItem colSpan={3}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>3</div></GridItem>
<GridItem colSpan={3}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>3</div></GridItem>
<GridItem colSpan={3}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>3</div></GridItem>
<GridItem colSpan={3}><div style={{ padding: '0.5rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px', textAlign: 'center' }}>3</div></GridItem>
</Grid>
<Grid gap="m">
<GridItem colSpan={{ base: 12, m: 8 }}>
<div style={{ padding: '2rem', background: 'var(--basecolors-frame-subdued)', borderRadius: '4px' }}>Innhold (12 kol. → 8 kol.)</div>
</GridItem>
<GridItem colSpan={{ base: 12, m: 4 }}>
<div style={{ padding: '2rem', background: 'var(--basecolors-frame-contrast)', color: 'var(--basecolors-text-light)', borderRadius: '4px' }}>Sidefelt (12 kol. → 4 kol.)</div>
</GridItem>
</Grid>