Layout Components

Grid5

A responsive layout component that creates a five-column grid. Perfect for organizing content into balanced, visually appealing arrangements.

Source Edit this page

A responsive layout component that arranges its children in a five-column CSS grid. Useful for dense feature listings, tag clouds, or stat boards.

When to Use

Five-up feature listings, weekday columns, or rating breakdowns.
Dense item layouts where four columns feel sparse and six feel cramped.
Stat boards or KPI grids that need an odd column count.

When NOT to Use

For four or six columns — use Grid4 or Grid6 instead.
For variable-width items — use Row flexWrap and let children size themselves.
For column-spanning layouts — use raw CSS grid with className instead.

Customizing

Set app-wide Grid5 defaults with ThemeProvider's themeDefaults:

import { ThemeProvider, Grid5 } from '@vaneui/ui';

<ThemeProvider themeDefaults={{
  grid5: { sm: true },
}}>
  <Grid5>{/* ... */}</Grid5>
</ThemeProvider>

Basic Grid5

A five-column grid layout. md, gap, noPadding, outline, and sharp are defaults — no need to specify them.

Item 1

Five-column layout

Item 2

Equal widths

Item 3

Five across

Item 4

Wraps after five

Item 5

End of row

Item 6

Second row

Item 7

Continues

Item 8

And fills

Item 9

Out evenly

Item 10

Across rows

<Grid5>
  <Card>
    <Title sm>Item 1</Title>
    <Text>Five-column layout</Text>
  </Card>
  <Card>
    <Title sm>Item 2</Title>
    <Text>Equal widths</Text>
  </Card>
  <Card>
    <Title sm>Item 3</Title>
    <Text>Five across</Text>
  </Card>
  <Card>
    <Title sm>Item 4</Title>
    <Text>Wraps after five</Text>
  </Card>
  <Card>
    <Title sm>Item 5</Title>
    <Text>End of row</Text>
  </Card>
  <Card>
    <Title sm>Item 6</Title>
    <Text>Second row</Text>
  </Card>
  <Card>
    <Title sm>Item 7</Title>
    <Text>Continues</Text>
  </Card>
  <Card>
    <Title sm>Item 8</Title>
    <Text>And fills</Text>
  </Card>
  <Card>
    <Title sm>Item 9</Title>
    <Text>Out evenly</Text>
  </Card>
  <Card>
    <Title sm>Item 10</Title>
    <Text>Across rows</Text>
  </Card>
</Grid5>

Grid Sizes

Sizes (xs, sm, md, lg, xl) scale the grid's gap and border-radius.

md (default)

<Col>
  <Text semibold>xs</Text>
  <Grid5 xs>
    <Card xs><Text xs>1</Text></Card>
    <Card xs><Text xs>2</Text></Card>
    <Card xs><Text xs>3</Text></Card>
    <Card xs><Text xs>4</Text></Card>
    <Card xs><Text xs>5</Text></Card>
  </Grid5>
  <Text semibold>sm</Text>
  <Grid5 sm>
    <Card sm><Text sm>1</Text></Card>
    <Card sm><Text sm>2</Text></Card>
    <Card sm><Text sm>3</Text></Card>
    <Card sm><Text sm>4</Text></Card>
    <Card sm><Text sm>5</Text></Card>
  </Grid5>
  <Text semibold>md (default)</Text>
  <Grid5>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Text semibold>lg</Text>
  <Grid5 lg>
    <Card lg><Text lg>1</Text></Card>
    <Card lg><Text lg>2</Text></Card>
    <Card lg><Text lg>3</Text></Card>
    <Card lg><Text lg>4</Text></Card>
    <Card lg><Text lg>5</Text></Card>
  </Grid5>
  <Text semibold>xl</Text>
  <Grid5 xl>
    <Card xl><Text xl>1</Text></Card>
    <Card xl><Text xl>2</Text></Card>
    <Card xl><Text xl>3</Text></Card>
    <Card xl><Text xl>4</Text></Card>
    <Card xl><Text xl>5</Text></Card>
  </Grid5>
</Col>

Grid with Gap

gap is on by default. Use noGap to remove spacing between cells.

Default gap

noGap

<Col>
  <Text semibold>Default gap</Text>
  <Grid5>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Text semibold>noGap</Text>
  <Grid5 noGap>
    <Card sharp><Text>1</Text></Card>
    <Card sharp><Text>2</Text></Card>
    <Card sharp><Text>3</Text></Card>
    <Card sharp><Text>4</Text></Card>
    <Card sharp><Text>5</Text></Card>
  </Grid5>
</Col>

Grid Appearances

Grid supports color appearances. Pair with filled or border to make the surface visible.

<Col>
  <Grid5 filled primary>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Grid5 filled secondary>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Grid5 filled success>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Grid5 filled warning>
    <Card><Text>1</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
</Col>

Grid Variants

outline is the default. Use filled for a solid background, or add border for a visible outline.

Filled primary

Outline success

<Col>
  <Grid5 filled primary>
    <Card><Text>Filled primary</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Grid5 border success>
    <Card><Text>Outline success</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
</Col>

Grid Shapes

sharp is the default. Use rounded for soft corners or pill for fully rounded edges. Shape applies to the grid container itself — pair with filled or border to see it.

Sharp (default)

Rounded

<Col>
  <Grid5 filled secondary sharp padding>
    <Card><Text>Sharp (default)</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
  <Grid5 filled secondary rounded padding>
    <Card><Text>Rounded</Text></Card>
    <Card><Text>2</Text></Card>
    <Card><Text>3</Text></Card>
    <Card><Text>4</Text></Card>
    <Card><Text>5</Text></Card>
  </Grid5>
</Col>

Grid5 Props

Prop	Category	Default	Description
`accent`	Appearance		Accent color appearance (rose)
`brand`	Appearance		Brand color appearance (blue)
`danger`	Appearance		Danger color appearance (red)
`info`	Appearance		Info color appearance (cyan)
`inherit`	Appearance		Inherit appearance from parent — suppresses own data-appearance/data-variant, uses parent's CSS variables
`link`	Appearance		Link color appearance (blue, for hyperlinks)
`primary`	Appearance		Primary color appearance (gray)
`secondary`	Appearance		Secondary color appearance (gray)
`success`	Appearance		Success color appearance (green)
`tertiary`	Appearance		Tertiary color appearance
`warning`	Appearance		Warning color appearance (amber)
`flex1`	Flex		Take up remaining space (= `flex-1`, i.e. `flex: 1 1 0%`)
`flexAuto`	Flex		Grow but respect intrinsic size (= `flex-auto`, i.e. `flex: 1 1 auto`)
`flexNone`	Flex		Don't grow and don't shrink (= `flex-none`, i.e. `flex: none`)
`noPadding`	Padding	✓	Disable internal padding
`padding`	Padding		Enable internal padding
`paddingX`	Padding		Enable only horizontal padding
`paddingY`	Padding		Enable only vertical padding
`pill`	Shape		Fully rounded corners (circular)
`rounded`	Shape		Medium rounded corners (default)
`sharp`	Shape	✓	No rounded corners (square)
`noShrink`	Shrink		Prevent the flex item from shrinking below its content size (= `shrink-0`)
`lg`	Size		Large size
`md`	Size	✓	Medium size (default)
`sm`	Size		Small size
`xl`	Size		Extra large size
`xs`	Size		Extra small size
`filled`	Variant		Filled variant - solid background with contrasting text color
`ghost`	Variant		Ghost variant - transparent background, no border, appearance-colored text, tinted hover background
`outline`	Variant	✓	Outline variant - transparent background with border and colored text (default)

Layout & utility props (gap, padding, hide, items, justify, ...) — documented on Common Props

Prop	Category	Default	Description
`border`	Border		Enable border on all sides
`borderB`	Border		Enable border on bottom
`borderL`	Border		Enable border on left
`borderR`	Border		Enable border on right
`borderT`	Border		Enable border on top
`borderX`	Border		Enable border on left and right
`borderY`	Border		Enable border on top and bottom
`noBorder`	Border		Disable all borders
`block`	Display		Block display - takes full width, new line
`contents`	Display		Contents display - element's box is removed, children display as if parent didn't exist
`flex`	Display		Flex display - flexbox container
`grid`	Display	✓	Grid display - CSS grid container
`hidden`	Display		Hidden display - element is not visible
`inline`	Display		Inline display - flows with text
`inlineBlock`	Display		Inline-block display - inline but with block properties
`inlineFlex`	Display		Inline-flex display - inline flexbox container
`inlineGrid`	Display		Inline-grid display - inline grid container
`table`	Display		Table display - behaves like table element
`tableCell`	Display		Table-cell display - behaves like td element
`column`	Flex Direction		Flex direction column (vertical)
`columnReverse`	Flex Direction		Flex direction column-reverse
`row`	Flex Direction		Flex direction row (horizontal)
`rowReverse`	Flex Direction		Flex direction row-reverse
`gap`	Gap	✓	Enable gap spacing between children
`noGap`	Gap		Disable gap spacing
`hAuto`	Height		Set height to auto
`hFit`	Height		Set height to fit-content
`hFull`	Height		Set height to 100%
`hScreen`	Height		Set height to 100vh (viewport height), removes max-height constraint
`desktopHide`	Hide		Hide element on desktop devices and below (max-desktop: 80rem)
`mobileHide`	Hide		Hide element on mobile devices and below (max-mobile: 48rem)
`tabletHide`	Hide		Hide element on tablet devices and below (max-tablet: 64rem)
`itemsBaseline`	Items		Align items to baseline
`itemsCenter`	Items		Align items to center
`itemsEnd`	Items		Align items to end (bottom/right)
`itemsStart`	Items		Align items to start (top/left)
`itemsStretch`	Items		Stretch items to fill container
`justifyAround`	Justify		Distribute items with space around them
`justifyBaseline`	Justify		Align items along their baseline on main axis
`justifyBetween`	Justify		Distribute items with space between them
`justifyCenter`	Justify		Center items along the main axis
`justifyEnd`	Justify		Pack items toward the end of the main axis
`justifyEvenly`	Justify		Distribute items with equal space around them
`justifyStart`	Justify		Pack items toward the start of the main axis
`justifyStretch`	Justify		Stretch items to fill the main axis
`overflowAuto`	Overflow		Auto overflow - show scrollbars if needed
`overflowClip`	Overflow		Clip overflow - hard clip without scrollbars
`overflowHidden`	Overflow		Hidden overflow - clip content without scrollbars
`overflowScroll`	Overflow		Scroll overflow - always show scrollbars
`overflowVisible`	Overflow		Visible overflow - content extends beyond bounds
`overflowXAuto`	Overflow		Auto overflow on X-axis only
`overflowXClip`	Overflow		Clip overflow on X-axis only
`overflowXHidden`	Overflow		Hidden overflow on X-axis only
`overflowXScroll`	Overflow		Scroll overflow on X-axis only
`overflowXVisible`	Overflow		Visible overflow on X-axis only
`overflowYAuto`	Overflow		Auto overflow on Y-axis only
`overflowYClip`	Overflow		Clip overflow on Y-axis only
`overflowYHidden`	Overflow		Hidden overflow on Y-axis only
`overflowYScroll`	Overflow		Scroll overflow on Y-axis only
`overflowYVisible`	Overflow		Visible overflow on Y-axis only
`absolute`	Position		Absolute positioning
`fixed`	Position		Fixed positioning
`relative`	Position		Relative positioning
`static`	Position		Static positioning
`sticky`	Position		Sticky positioning
`responsive`	Responsive		Enable responsive sizing - uses breakpoint-specific classes for font size, padding, and gap
`reverse`	Reverse		Reverse the order of children
`transparent`	Transparent		Disable background color - makes component background transparent
`wAuto`	Width		Set width to auto
`wFit`	Width		Set width to fit-content
`wFull`	Width		Set width to 100%
`wScreen`	Width		Set width to 100vw (viewport width), removes max-width constraint
`flexNoWrap`	Wrap		Force flex items to stay on single line (may overflow)
`flexWrap`	Wrap		Allow flex items to wrap to new lines when container is too narrow
`flexWrapReverse`	Wrap		Wrap flex items in reverse order (last items wrap first)