VaneUI

VaneUI

DocumentationGitHub

Layout Components

Grid4

A responsive layout component that arranges its children into a four-column grid. This is ideal for displaying a collection of items or features.

SourceEdit this page

A responsive layout component that arranges its children in a four-column CSS grid. Ideal for displaying collections of items, features, or product tiles.

When to Use

  • Four-up feature grids, product catalogs, or pricing tier layouts.
  • Card layouts with item counts in multiples of four (4, 8, 12).
  • Image galleries and thumbnail grids needing equal column widths.

When NOT to Use

  • For three or five columns — use Grid3 or Grid5 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 Grid4 defaults with ThemeProvider's themeDefaults:

react-icon
import { ThemeProvider, Grid4 } from '@vaneui/ui';


<ThemeProvider themeDefaults={{
  grid4: { lg: true },
}}>
  <Grid4>{/* ... */}</Grid4>
</ThemeProvider>

Basic Grid4

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

Item 1

Four-column layout

Item 2

Equal widths

Item 3

Wraps after four

Item 4

End of first row

Item 5

Second row

Item 6

Continues

Item 7

And fills

Item 8

Out evenly

react-icon
<Grid4>
  <Card>
    <Title>Item 1</Title>
    <Text>Four-column layout</Text>
  </Card>
  <Card>
    <Title>Item 2</Title>
    <Text>Equal widths</Text>
  </Card>
  <Card>
    <Title>Item 3</Title>
    <Text>Wraps after four</Text>
  </Card>
  <Card>
    <Title>Item 4</Title>
    <Text>End of first row</Text>
  </Card>
  <Card>
    <Title>Item 5</Title>
    <Text>Second row</Text>
  </Card>
  <Card>
    <Title>Item 6</Title>
    <Text>Continues</Text>
  </Card>
  <Card>
    <Title>Item 7</Title>
    <Text>And fills</Text>
  </Card>
  <Card>
    <Title>Item 8</Title>
    <Text>Out evenly</Text>
  </Card>
</Grid4>

Grid Sizes

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

xs

Item 1

Item 2

Item 3

Item 4

sm

Item 1

Item 2

Item 3

Item 4

md (default)

Item 1

Item 2

Item 3

Item 4

lg

Item 1

Item 2

Item 3

Item 4

xl

Item 1

Item 2

Item 3

Item 4

react-icon
<Col>
  <Text semibold>xs</Text>
  <Grid4 xs>
    <Card xs><Text xs>Item 1</Text></Card>
    <Card xs><Text xs>Item 2</Text></Card>
    <Card xs><Text xs>Item 3</Text></Card>
    <Card xs><Text xs>Item 4</Text></Card>
  </Grid4>
  <Text semibold>sm</Text>
  <Grid4 sm>
    <Card sm><Text sm>Item 1</Text></Card>
    <Card sm><Text sm>Item 2</Text></Card>
    <Card sm><Text sm>Item 3</Text></Card>
    <Card sm><Text sm>Item 4</Text></Card>
  </Grid4>
  <Text semibold>md (default)</Text>
  <Grid4>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Text semibold>lg</Text>
  <Grid4 lg>
    <Card lg><Text lg>Item 1</Text></Card>
    <Card lg><Text lg>Item 2</Text></Card>
    <Card lg><Text lg>Item 3</Text></Card>
    <Card lg><Text lg>Item 4</Text></Card>
  </Grid4>
  <Text semibold>xl</Text>
  <Grid4 xl>
    <Card xl><Text xl>Item 1</Text></Card>
    <Card xl><Text xl>Item 2</Text></Card>
    <Card xl><Text xl>Item 3</Text></Card>
    <Card xl><Text xl>Item 4</Text></Card>
  </Grid4>
</Col>

Grid with Gap

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

Default gap

Item 1

Item 2

Item 3

Item 4

noGap

Item 1

Item 2

Item 3

Item 4

react-icon
<Col>
  <Text semibold>Default gap</Text>
  <Grid4>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Text semibold>noGap</Text>
  <Grid4 noGap>
    <Card sharp><Text>Item 1</Text></Card>
    <Card sharp><Text>Item 2</Text></Card>
    <Card sharp><Text>Item 3</Text></Card>
    <Card sharp><Text>Item 4</Text></Card>
  </Grid4>
</Col>

Grid Appearances

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

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

Item 1

Item 2

Item 3

Item 4

react-icon
<Col>
  <Grid4 filled primary>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Grid4 filled secondary>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Grid4 filled success>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Grid4 filled warning>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
</Col>

Grid Variants

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

Filled primary

Item 2

Item 3

Item 4

Outline success

Item 2

Item 3

Item 4

react-icon
<Col>
  <Grid4 filled primary>
    <Card><Text>Filled primary</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Grid4 border success>
    <Card><Text>Outline success</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
</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)

Item 2

Item 3

Item 4

Rounded

Item 2

Item 3

Item 4

react-icon
<Col>
  <Grid4 filled secondary sharp padding>
    <Card><Text>Sharp (default)</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
  <Grid4 filled secondary rounded padding>
    <Card><Text>Rounded</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
    <Card><Text>Item 4</Text></Card>
  </Grid4>
</Col>

Grid4 Props

PropCategoryDefaultDescription
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
PropCategoryDefaultDescription
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)

More in Layout Components

SectionContainerRowColStackCardGrid2Grid3Grid5Grid6

On this page

Grid4When to UseWhen NOT to UseCustomizingBasic Grid4Grid SizesGrid with GapGrid AppearancesGrid VariantsGrid ShapesGrid4 Props