Hopp til innhold
Aksel

Komponenter

HGrid

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.

StabilOppdatert 30. april 2025
GithubEndringslogg

Egnet til:

  • Oppbygging av sidelayout
  • Gruppering av Cards

Eksempler

Props

HGrid

className?

  • Type:
    string

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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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"
  • Description:

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

padding?

  • Type:
    ResponsiveProp<AkselSpaceToken>
  • 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 521 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 521 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<AkselSpaceToken | "space-0 space-0" | "space-0 space-1" | "space-0 space-2" | "space-0 space-4" | "space-0 space-6" | "space-0 space-8" | "space-0 space-12" | ... 476 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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<AkselSpaceToken>
  • 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.

  • Example:
    <Component asChild data-prop>
      <ChildComponent data-child />
    </Component>
    

    // Renders
    <div data-prop data-child />

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