Intro
HGrid brukes for å fordele elementer horisontalt med riktig spacing og dynamiskt basert på brekkpunktene våre. Løsningen er basert på CSS-grid.
Egnet til:
- Oppbygging av sidelayout
- Gruppering av Cards
Eksempler
HGrid lar deg enkelt dele innholdet opp i kolonner. Basert på CSS-grid
Columns støtter både statisk antall kolonner med 'number' og mer fleksible kolonner med 'string'.
Med responsive kolonner kan man dynamiskt tilpasse dem basert på brekkpunktene våre.
Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.
Med responsiv gap kan man dynamiskt tilpasse spacing basert på brekkpunktene våre.
Varianter
Columns
Bruker api-et ResponsiveProp<number|string>. Dette lar deg sette en statisk verdi basert på tokens fra Aksel, eller verdier som bare brukes på spesifikke brekkpunkt.
Number
Hvis du bruker number til å definer columns blir det automatisk omgjort til repeat(<number>, minmax(0, 1fr)).
String
Ønsker man mer kontroll kan du manuelt definere columns
Gap
Bruker api-et ResponsiveProp<SpacingTokens>.
Props
HGrid
- columns? ResponsiveProp<string | number>
- Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints. Sets `grid-template-columns`, so `fr`, `minmax` etc. works. @example columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}} @example columns={3} @example columns="repeat(3, minmax(0, 1fr))"
- gap? ResponsiveProp<SpacingScale>
- Spacing between columns. Based on spacing-tokens. @example gap="6" gap={{ sm: "2", md: "2", lg: "6", xl: "6"}}
- className? string
- ref? Ref<HTMLDivElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- HGrid extends HTMLDivElement