Intro
HGrid brukes for å fordele elementer horisontalt med riktig spacing og dynamisk basert på brekkpunktene våre. Løsningen er basert på CSS-grid.
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?
- Type:
ResponsiveProp<string | number>
- Description:
- Example:
gap?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
align?
- Type:
"start" | "center" | "end"
- Description:
padding?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
margin?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
marginInline?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 478 more ... | "32 auto">
- Description:
- Example:
width?
- Type:
ResponsiveProp<string>
- Description:
minWidth?
- Type:
ResponsiveProp<string>
- Description:
maxWidth?
- Type:
ResponsiveProp<string>
- Description:
height?
- Type:
ResponsiveProp<string>
- Description:
minHeight?
- Type:
ResponsiveProp<string>
- Description:
maxHeight?
- Type:
ResponsiveProp<string>
- Description:
position?
- Type:
ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
- Description:
inset?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32" | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | ... 435 more ... | "32 32">
- Description:
- Example:
top?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
right?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
bottom?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
left?
- Type:
ResponsiveProp<"0" | "05" | "1" | "1-alt" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12" | "14" | "16" | "18" | "20" | "24" | "32">
- Description:
- Example:
overflow?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
overflowX?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
overflowY?
- Type:
ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
- Description:
flexBasis?
- Type:
ResponsiveProp<string>
- Description:
flexShrink?
- Type:
ResponsiveProp<string>
- Description:
flexGrow?
- Type:
ResponsiveProp<string>
- Description:
gridColumn?
- Type:
ResponsiveProp<string>
- Description:
asChild?
- Type:
boolean
- Description:
- Example:
ref?
- Type:
LegacyRef<HTMLDivElement>
- Description: