Grid er en layoutkomponent for CSS Grid. Den tilbyr et 12-kolonnesystem med støtte for responsive kolonnespenner, egendefinerte oppsett og gap-verdier fra designsystemets spacing-skala.
Når bruker du Grid
Grid brukes for toaksekontrollert layout med rader og kolonner. Det passer til sideoppsett, dashbord og skjemaer der innholdet skal justeres langs begge akser samtidig.
For enkle rad- eller kolonnebaserte oppsett uten behov for toaksekontroll, bruk Flex i stedet.
12-kolonnesystemet
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.
12-kolonnesystem
Typisk sideoppsett
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}.
Innhold og sidefelt
Mellomrom
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.
Responsivt oppsett
Alle propser – inkludert colSpan og templateColumns – støtter responsive objekter med brekkpunktene base (mobil), s (600px), m (800px), lg (1200px) og xl (1400px).
Universell utforming
Grid og GridItem er rene layoutelementer uten semantisk betydning. Sørg for at innholdet inni har riktig semantisk struktur med korrekte HTML-elementer og ARIA-attributter der det trengs.