Intro
HGrid er en av våre layout primitives. Den brukes for å fordele elementer horisontalt med lik spacing basert på brekkpunktene våre. Løsningen er basert på CSS-grid.
HGrid har mye til felles med HStack, men sistnevnte bruker Flex layout. Les mer om forskjellen mellom Grid og Flex.
Eksempler
Prop-en 'columns' styrer CSS-attributtet 'grid-template-columns'. Hvis du bruker tall blir det automatisk omgjort til 'repeat(<number>, minmax(0, 1fr))'.
Med responsive kolonner kan du dynamisk tilpasse dem basert på brekkpunktene våre.
Med responsiv gap kan du dynamisk tilpasse spacing basert på brekkpunktene våre.
Endrer 'align-items' (vertikal justering).
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:
