Grid

Grid er en layout-primitiv for å stable innhold i to dimensjoner — vertikalt og horisontalt. Den fungerer både som custom element (<ix-grid>) og som CSS-klasse (.ix-grid).

Egnet til

• Layout i to dimensjoner — vertikalt og horisontalt samtidig
• Responsiv layout med automatisk tilpasning til tilgjengelig plass (auto-fit, auto-fill)
• Jevnt fordelte kolonner med kontrollert mellomrom
• Layout både på sidenivå og internt i komponenter eller seksjoner

Uegnet til

• Layout i kun én dimensjon — bruk Stack i stedet
• Kompleks layout der du trenger ulik kolonnestørrelse per rad

Kom i gang

ix-grid har 12 kolonner og md gap som standard. Bruk cols- og gap-attributtene (eller props) for å overstyre.

Grid finnes i to bruksformer i HTML:

Form	Eksempel	Styring
Custom element	<ix-grid cols="3" gap="md">	Attributter direkte på elementet
CSS-klasse	<div class="ix-grid ix-grid-cols-3 ix-gap-md">	Modifier-klasser — attributter virker ikke her

<ix-grid> bruker attributter:

Result

Loading...

Kode

Live Editor

<ix-grid cols="3">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
</ix-grid>

På vanlige elementer bruker du CSS-klasser — se CSS-klasser for containeren i API-seksjonen.

Result

Loading...

Kode

Live Editor

<Grid cols={3}>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
</Grid>

Eksempler

Kolonner

Result

Loading...

Kode

Live Editor

<ix-grid cols="2" gap="sm">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<ix-grid cols="4" gap="sm">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">7</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">8</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<VStack gap="lg">
  <Grid cols={2} gap="sm">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  </Grid>
  <Grid cols={4} gap="sm">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">7</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">8</div>
  </Grid>
</VStack>

Auto-fit — responsiv layout

auto-fit tilpasser antall kolonner til tilgjengelig plass og strekker cellene for å fylle hele bredden.

Result

Loading...

Kode

Live Editor

<ix-grid cols="auto-fit-md" gap="sm">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 4</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 5</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<Grid cols="auto-fit-md" gap="sm">
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 1</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 2</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 3</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 4</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Auto 5</div>
</Grid>

Auto-fill — behold cellestørrelse

auto-fill tilpasser antall kolonner, men beholder cellestørrelsen i stedet for å strekke dem.

Result

Loading...

Kode

Live Editor

<ix-grid cols="auto-fill-sm" gap="sm">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 3</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<Grid cols="auto-fill-sm" gap="sm">
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 1</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 2</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Fill 3</div>
</Grid>

Col-span — ulik bredde per celle

Bruk colspan-attributt eller Grid.Item for å la celler spenne over flere kolonner. Kombiner med 12-kolonners grid for fleksibel layout.

Result

Loading...

Kode

Live Editor

<ix-grid cols="12" gap="sm">
  <div colspan="4" class="ix-color-surface-info-default ix-px-md ix-py-2xs">4 kolonner</div>
  <div colspan="8" class="ix-color-surface-info-default ix-px-md ix-py-2xs">8 kolonner</div>
  <div colspan="6" class="ix-color-surface-info-default ix-px-md ix-py-2xs">6 kolonner</div>
  <div colspan="6" class="ix-color-surface-info-default ix-px-md ix-py-2xs">6 kolonner</div>
  <div colspan="full" class="ix-color-surface-info-default ix-px-md ix-py-2xs">Full bredde</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<Grid cols={12} gap="sm">
  <Grid.Item colspan={4} className="ix-color-surface-info-default ix-px-md ix-py-2xs">4 kolonner</Grid.Item>
  <Grid.Item colspan={8} className="ix-color-surface-info-default ix-px-md ix-py-2xs">8 kolonner</Grid.Item>
  <Grid.Item colspan={6} className="ix-color-surface-info-default ix-px-md ix-py-2xs">6 kolonner</Grid.Item>
  <Grid.Item colspan={6} className="ix-color-surface-info-default ix-px-md ix-py-2xs">6 kolonner</Grid.Item>
  <Grid.Item colspan="full" className="ix-color-surface-info-default ix-px-md ix-py-2xs">Full bredde</Grid.Item>
</Grid>

Gap

Standard gap er md. Bruk gap-prop/-attributt for å overstyre.

Result

Loading...

Kode

Live Editor

<ix-grid cols="3" gap="lg">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<ix-grid cols="3" gap="none">
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
</ix-grid>

Tilgjengelige størrelser for gap-attributt: none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl, 4xl

Result

Loading...

Kode

Live Editor

<VStack gap="lg">
  <Grid cols={3} gap="lg">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
  </Grid>
  <Grid cols={3} gap="none">
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">1</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">2</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">3</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">4</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">5</div>
    <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">6</div>
  </Grid>
</VStack>

Align — vertikal justering av innhold

Result

Loading...

Kode

Live Editor

<ix-grid cols="3" align="center" gap="sm" style={{ height: '120px' }}>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Kort</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-xl">Høy</div>
  <div class="ix-color-surface-info-default ix-px-md ix-py-2xs">Kort</div>
</ix-grid>

Result

Loading...

Kode

Live Editor

<Grid cols={3} align="center" gap="sm" style={{ height: '120px' }}>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Kort</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-xl">Høy</div>
  <div className="ix-color-surface-info-default ix-px-md ix-py-2xs">Kort</div>
</Grid>

Universell utforming

Hva du selv må sørge for

• Bruk semantiske elementer når konteksten krever det — ix-grid er et ukjent HTML-element uten semantisk rolle. Nettleseren behandler det som generisk blokkinnhold, på samme måte som <div>. Bruk as-prop i React (f.eks. <Grid as="section">) eller CSS-klasser direkte på et native element når innholdet krever semantikk.
• Pass på DOM-rekkefølgen — CSS Grid kan endre visuell rekkefølge uten å endre DOM-rekkefølgen. Skjermlesere og tastaturnavigasjon følger DOM. Sørg for at DOM-rekkefølgen gir mening uavhengig av visuell presentasjon.

På native elementer (ikke <ix-grid>) virker ikke attributter — bruk modifier-klasser:

<!-- CSS-klasse på semantisk element — modifier-klasser styrer kolonner og gap -->
<section class="ix-grid ix-grid-cols-3 ix-gap-md">
  <article>Artikkel 1</article>
  <article>Artikkel 2</article>
  <article>Artikkel 3</article>
</section>

<!-- Tilsvarende med <ix-grid> — her bruker du attributter i stedet for klasser -->
<ix-grid cols="3" gap="md">...</ix-grid>

WCAG-kriterier

Sist gjennomgått: 2026-06-17 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier3 ditt ansvar · 0 håndtert · 53 ikke relevant · 0 ikke på plass

Ditt ansvar (3)

Kriterium	Nivå	Hva du må gjøre
1.3.1 Informasjon og relasjoner	A	Bruk semantiske elementer når konteksten krever det. ix-grid er et ukjent HTML-element uten semantisk rolle — tilsvarende <div>. Nettleseren injiserer ingen ARIA. Bruk et semantisk native element med ix-grid-*-klasser (eller as-prop i React) når innholdet krever det — f.eks. <section class="ix-grid"> for innholdsseksjoner, <ul class="ix-grid"> for lister.
1.3.2 Meningsfull rekkefølge	A	Pass på DOM-rekkefølgen ved komplekse grid-oppsett. CSS Grid kan endre visuell rekkefølge uten å endre DOM-rekkefølgen. Skjermlesere og tastaturnavigasjon følger DOM. Sørg for at DOM-rekkefølgen gir mening uavhengig av visuell presentasjon.
2.4.3 Fokusrekkefølge	A	Pass på DOM-rekkefølgen ved komplekse grid-oppsett. CSS Grid kan endre visuell rekkefølge uten å endre DOM-rekkefølgen. Skjermlesere og tastaturnavigasjon følger DOM. Sørg for at DOM-rekkefølgen gir mening uavhengig av visuell presentasjon.

Ikke relevant (53)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Ingen bilder eller ikke-tekstlig innhold i selve layout-elementet.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.3 Sensoriske egenskaper	A	Ingen sensoriske karakteristikker brukes for å formidle informasjon.
1.3.4 Visningsretning	AA	Ingen orientasjonslåsing.
1.3.5 Identifiser formål med inndata	AA	Ingen skjemafelt.
1.4.1 Bruk av farge	A	Farge brukes ikke for å formidle informasjon.
1.4.2 Styring av lyd	A	Ingen lyd.
1.4.3 Kontrast (minimum)	AA	Ingen tekst i selve layout-elementet.
1.4.4 Endre tekststørrelse	AA	Ingen tekst i komponenten. Layout bruker relative enheter og skalerer korrekt.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.10 Omflyt	AA	Grid-layout med auto-fit/auto-fill flyter naturlig ved smal viewport.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Ingen UI-komponenter med krav til ikke-tekstlig kontrast.
1.4.12 Tekstavstand	AA	Ingen tekst i selve elementet.
1.4.13 Innhold ved hover eller fokus	AA	Ingen hover/fokus-innhold.
2.1.1 Tastatur	A	Rent layout-element — ikke fokuserbart.
2.1.2 Ingen tastaturfelle	A	Ingen fokus-felle.
2.1.4 Tastatursnarveier	A	Ingen hurtigtaster.
2.2.1 Justerbar hastighet	A	Ingen tidsfrister.
2.2.2 Pause, stopp, skjul	A	Ingen bevegelig eller autooppdatert innhold.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinking eller flimring.
2.4.1 Hoppe over blokker	A	Ingen blokker som må hoppes over.
2.4.2 Sidetitler	A	Ikke en side-komponent.
2.4.4 Formål med lenke (i kontekst)	A	Ingen lenker i komponenten.
2.4.5 Flere måter	AA	Ikke en navigasjonsstruktur.
2.4.6 Overskrifter og ledetekster	AA	Ingen overskrifter eller labeler i komponenten.
2.4.7 Synlig fokus	AA	Ikke fokuserbar.
2.4.11 Fokus ikke skjult (minimum)	AA	Ikke fokuserbar.
2.5.1 Pekerbevegelser	A	Ingen peker-gester.
2.5.2 Avbryt peker	A	Ingen peker-kanselleringslogikk.
2.5.3 Label i navn	A	Ingen synlig label.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert aktivering.
2.5.6 Samtidige inndatamekanismer	A	Ingen begrensning på input-modalitet.
2.5.7 Drabevegelser	A	Ingen draing-funksjonalitet.
2.5.8 Målstørrelse (minimum)	AA	Ikke et interaktivt mål.
3.1.1 Språk på siden	A	Ikke en side-komponent.
3.1.2 Språk på deler av innhold	AA	Ingen språkendringer.
3.2.1 Ved fokus	A	Ikke fokuserbar.
3.2.2 Ved inndata	A	Ingen input.
3.2.3 Konsistent navigasjon	AA	Ingen navigasjon.
3.2.4 Konsistent identifikasjon	AA	Ingen gjentagende komponenter med inkonsistent identifisering.
3.2.6 Konsistent hjelp	A	Ingen hjelp-funksjonalitet.
3.3.1 Identifikasjon av feil	A	Ingen skjemavalidering.
3.3.2 Ledetekster eller instruksjoner	A	Ingen skjemafelt.
3.3.3 Forslag ved feil	AA	Ingen feilforslag.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Ingen juridisk forpliktende handlinger.
3.3.7 Redundant oppføring	A	Ingen redundant input.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ingen tilgjengelighetsautentisering.
4.1.2 Navn, rolle, verdi	A	Ikke et interaktivt element — ingen rolle, navn eller tilstand å eksponere.
4.1.3 Statusmeldinger	AA	Ingen statusmeldinger.

Props / API

<ix-grid> — attributter

Attributter kan bare brukes på <ix-grid>-elementet, ikke på vanlige <div>-er.

Attributt	Verdi	Beskrivelse
cols	1 | 2 | 3 | 4 | 6 | 12	Fast antall kolonner
cols	auto-fit-xs | auto-fit-sm | auto-fit-md | auto-fit-lg	Responsivt antall kolonner, celler strekkes
cols	auto-fill-xs | auto-fill-sm | auto-fill-md | auto-fill-lg	Responsivt antall kolonner, cellestørrelse beholdes
rows	1 | 2 | 3 | 4	Fast antall rader
gap	none | 2xs | xs | sm | md | lg | xl | 2xl | 3xl | 4xl	Avstand mellom celler. Standard: md
align	start | end | center | stretch	Vertikal justering av innhold i celler
justify	start | end | center | stretch	Horisontal justering av innhold i celler
inline	(ingen verdi)	Gjør grid til inline-grid

CSS-klasser for containeren

Klasser fungerer på både <ix-grid> og vanlige elementer som <div>.

Klasse	Beskrivelse
ix-grid	Aktiverer grid-layout med standard gap (md)
ix-grid-cols-1 ... ix-grid-cols-12	Fast antall kolonner
ix-grid-auto-fit-xs ... ix-grid-auto-fit-lg	Responsivt antall kolonner, celler strekkes
ix-grid-auto-fill-xs ... ix-grid-auto-fill-lg	Responsivt antall kolonner, cellestørrelse beholdes
ix-grid-rows-1 ... ix-grid-rows-4	Fast antall rader
ix-grid-align-start ... ix-grid-align-stretch	Vertikal justering
ix-grid-justify-start ... ix-grid-justify-stretch	Horisontal justering
ix-inline-grid	Inline-grid

Attributter for barn (colspan, rowspan)

Settes på barna inne i grid-containeren for å kontrollere hvor mange kolonner/rader de spenner over.

Attributt	Verdi	Beskrivelse
colspan	1 ... 12 | full	Antall kolonner cellen spenner over
rowspan	1 ... 4 | full	Antall rader cellen spenner over

CSS-klasser for barn

Alternativt kan du bruke CSS-klasser i stedet for attributter.

Klasse	Beskrivelse
ix-col-span-1 ... ix-col-span-12	Antall kolonner cellen spenner over
ix-col-span-full	Spenner over alle kolonner
ix-row-span-1 ... ix-row-span-4	Antall rader cellen spenner over
ix-row-span-full	Spenner over alle rader
ix-col-start-1 ... ix-col-start-13	Start-kolonne
ix-col-end-1 ... ix-col-end-13	Slutt-kolonne

Standard gap er md. Bruk gap-attributtet på <ix-grid> eller ix-gap-* utility-klasser på andre elementer for å overstyre.

Grid

Prop	Type	Standard	Beskrivelse
as	ElementType		Rendrer et native element med CSS-klasser i stedet for <ix-grid> med attributter. Bruk for semantikk — f.eks. as="section".
cols	1 | 2 | 3 | 4 | 6 | 12 | 'auto-fit-xs' | 'auto-fit-sm' | 'auto-fit-md' | 'auto-fit-lg' | 'auto-fill-xs' | 'auto-fill-sm' | 'auto-fill-md' | 'auto-fill-lg'		Antall kolonner eller responsivt mønster
rows	1 | 2 | 3 | 4		Antall rader
gap	GapSize	'md'	Avstand mellom celler
align	'start' | 'end' | 'center' | 'stretch'		Vertikal justering av innhold i celler
justify	'start' | 'end' | 'center' | 'stretch'		Horisontal justering av innhold i celler
inline	boolean		Gjør grid til inline-grid
className	string		Ekstra CSS-klasser
ref	Ref<HTMLElement>		Ref til rotelementet

Støtter alle standard HTML-attributter for det rendrede elementet (id, style, data-* osv.).

Grid.Item

Wrapper for grid-barn som trenger colspan eller rowspan.

Prop	Type	Standard	Beskrivelse
as	ElementType	'div'	Rendrer som annet element
colspan	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full'		Antall kolonner cellen spenner over
rowspan	1 | 2 | 3 | 4 | 'full'		Antall rader cellen spenner over
className	string		Ekstra CSS-klasser

Tilpasning med CSS

Grid-komponentene har ingen egne CSS custom properties. Bruk utility-klasser for ytterligere tilpasning:

<ix-grid cols="3" gap="md" class="ix-justify-items-center">
  <div>Sentrert</div>
  <div>Sentrert</div>
  <div>Sentrert</div>
</ix-grid>

Relatert

• Stack — layout i én dimensjon
• Gap utility-klasser — ix-gap-*, ix-row-gap-*, ix-col-gap-*
• Spacing tokens — størrelser tilgjengelig for gap