HGrid

data-color?

• Type:
  (string & {}) | AkselColor

columns?

• Type:
  ResponsiveProp<string | number>
• Description:

  Number of columns to display. Can be a number, a string, or an object with values for specific breakpoints. Sets grid-template-columns, so fr, minmax etc. works.

• Example:

  columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}columns={3}columns="repeat(3, minmax(0, 1fr))"

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:

  Spacing between columns. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  gap="space-20"gap="space-32 space-16"gap={{ sm: "space-8", md: "space-12", lg: "space-20", xl: "space-24"}}

align?

• Type:
  "start" | "center" | "end"
• Default:
  "null"
• Description:

  Vertical alignment of children. Elements will by default stretch to the height of parent-element.

padding?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  padding='space-16'padding={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

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:

  Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  paddingInline='space-16'paddingInline='space-16 space-20'paddingInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

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:

  Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  paddingBlock='space-16'paddingBlock='space-16 space-20'paddingBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

margin?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  margin='space-16'margin={{xs: '0', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

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:

  Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  marginInline='space-16'marginInline='space-16 space-20'marginInline={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

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:

  Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  marginBlock='space-16'marginBlock='space-16 space-20'marginBlock={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

width?

• Type:
  ResponsiveProp<string>
• Description:

  CSS width

minWidth?

• Type:
  ResponsiveProp<string>
• Description:

  CSS min-width

maxWidth?

• Type:
  ResponsiveProp<string>
• Description:

  CSS max-width

height?

• Type:
  ResponsiveProp<string>
• Description:

  CSS height

minHeight?

• Type:
  ResponsiveProp<string>
• Description:

  CSS min-height

maxHeight?

• Type:
  ResponsiveProp<string>
• Description:

  CSS max-height

position?

• Type:
  ResponsiveProp<"static" | "relative" | "absolute" | "fixed" | "sticky">
• Description:

  CSS position

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:

  CSS inset. Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  inset='space-16'inset='space-16 space-20'inset={{xs: '0 space-8', sm: 'space-12', md: 'space-16 space-20', lg: 'space-20', xl: 'space-24'}}

top?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  CSS top Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  top='space-16'top={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

right?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  CSS right Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  right='space-16'right={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

bottom?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  CSS bottom Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  bottom='space-16'bottom={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

left?

• Type:
  ResponsiveProp<SpacingScale>
• Description:

  CSS left Accepts a spacing token or an object of spacing tokens for different breakpoints.

• Example:

  left='space-16'left={{xs: 'space-8', sm: 'space-12', md: 'space-16', lg: 'space-20', xl: 'space-24'}}

overflow?

• Type:
  ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
• Description:

  CSS overflow

overflowX?

• Type:
  ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
• Description:

  CSS overflow-x

overflowY?

• Type:
  ResponsiveProp<"auto" | "visible" | "hidden" | "clip" | "scroll">
• Description:

  CSS overflow-y

flexBasis?

• Type:
  ResponsiveProp<string>
• Description:

  CSS flex-basis

flexShrink?

• Type:
  ResponsiveProp<string>
• Description:

  CSS flex-shrink

flexGrow?

• Type:
  ResponsiveProp<string>
• Description:

  CSS flex-grow

gridColumn?

• Type:
  ResponsiveProp<string>
• Description:

  CSS grid-column

asChild?

• Type:
  boolean
• Description:

  Renders the component and its child as a single element, merging the props of the component with the props of the child.

  // Renders

  <div data-prop data-child /> ``` @example ```tsx <Component asChild data-prop> <ChildComponent data-child /> </Component>

  // Renders

  <div data-prop data-child /> ```
• Example:

  ```tsx<Component asChild data-prop>  <ChildComponent data-child /></Component>

ref?

• Type:
  LegacyRef<HTMLDivElement>
• Description:

  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). React Docs