HGrid
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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
align?
- Type:
"start" | "center" | "end" - Description:
padding?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
paddingInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
paddingBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
margin?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
marginInline?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 auto"> - Description:
- Example:
marginBlock?
- Type:
ResponsiveProp<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1918 more ... | "space-128 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<SpacingScale | "0 0" | "0 05" | "0 1" | "0 1-alt" | "0 2" | "0 3" | "0 4" | "0 5" | "0 6" | "0 7" | "0 8" | "0 9" | "0 10" | "0 11" | "0 12" | "0 14" | "0 16" | ... 1831 more ... | "space-128 space-128"> - Description:
- Example:
top?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
right?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
bottom?
- Type:
ResponsiveProp<SpacingScale> - Description:
- Example:
left?
- Type:
ResponsiveProp<SpacingScale> - 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:
