VaneUI

VaneUI

DocumentationPlaygroundGitHub

Layout Components

Grid

Responsive equal-width column layouts. Grid2 through Grid6 render two to six columns that reduce on smaller screens; they share one API and differ only in column count.

SourceEdit this page

Basic usage

The Grid family renders equal-width column layouts: Grid2 through Grid6 for two to six columns. Children flow left to right and wrap to the next row. md, gap, noPadding, outline, and sharp are defaults, so none of them need to be specified.

Item 1

Three-column layout

Item 2

Equal widths

Item 3

Wraps to next row

react-icon
<Grid3>
  <Card>
    <Title>Item 1</Title>
    <Text>Three-column layout</Text>
  </Card>
  <Card>
    <Title>Item 2</Title>
    <Text>Equal widths</Text>
  </Card>
  <Card>
    <Title>Item 3</Title>
    <Text>Wraps to next row</Text>
  </Card>
</Grid3>

Column counts

Pick the component for the number of columns you need, from Grid2 to Grid6. They share the same API and differ only in the column count.

Grid2

1

2

Grid3

1

2

3

Grid4

1

2

3

4

Grid6

1

2

3

4

5

6

react-icon
<Col>
  <Text semibold>Grid2</Text>
  <Grid2>
    <Card><Text textCenter>1</Text></Card>
    <Card><Text textCenter>2</Text></Card>
  </Grid2>
  <Text semibold>Grid3</Text>
  <Grid3>
    <Card><Text textCenter>1</Text></Card>
    <Card><Text textCenter>2</Text></Card>
    <Card><Text textCenter>3</Text></Card>
  </Grid3>
  <Text semibold>Grid4</Text>
  <Grid4>
    <Card><Text textCenter>1</Text></Card>
    <Card><Text textCenter>2</Text></Card>
    <Card><Text textCenter>3</Text></Card>
    <Card><Text textCenter>4</Text></Card>
  </Grid4>
  <Text semibold>Grid6</Text>
  <Grid6>
    <Card><Text textCenter>1</Text></Card>
    <Card><Text textCenter>2</Text></Card>
    <Card><Text textCenter>3</Text></Card>
    <Card><Text textCenter>4</Text></Card>
    <Card><Text textCenter>5</Text></Card>
    <Card><Text textCenter>6</Text></Card>
  </Grid6>
</Col>

Responsive columns

Each grid reduces its column count on smaller screens so cells never get too narrow. The breakpoints are tablet (≤1024px) and mobile (≤768px). Resize the window to see the reflow.

ComponentDesktopTabletMobile
Grid2221
Grid3321
Grid4432
Grid5532
Grid6642

Sizes

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

xs

Item 1

Item 2

Item 3

md (default)

Item 1

Item 2

Item 3

xl

Item 1

Item 2

Item 3

react-icon
<Col>
  <Text semibold>xs</Text>
  <Grid3 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>
  </Grid3>
  <Text semibold>md (default)</Text>
  <Grid3>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
  <Text semibold>xl</Text>
  <Grid3 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>
  </Grid3>
</Col>

Appearances

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

Item 1

Item 2

Item 3

Item 1

Item 2

Item 3

react-icon
<Col>
  <Grid3 filled primary>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
  <Grid3 filled success>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
</Col>

Variants

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

Filled primary

Item 2

Item 3

Outline success

Item 2

Item 3

react-icon
<Col>
  <Grid3 filled primary>
    <Card><Text>Filled primary</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
  <Grid3 border success>
    <Card><Text>Outline success</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
</Col>

Shapes

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

Sharp (default)

Item 2

Item 3

Rounded

Item 2

Item 3

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

With gap

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

Default gap

Item 1

Item 2

Item 3

noGap

Item 1

Item 2

Item 3

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

Customizing

Set app-wide Grid defaults with ThemeProvider's themeDefaults. Each column count has its own key (grid2 through grid6).

Item 1

Item 2

Item 3

react-icon
<ThemeProvider themeDefaults={{
  grid3: { lg: true },
}}>
  <Grid3>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
    <Card><Text>Item 3</Text></Card>
  </Grid3>
</ThemeProvider>

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

margin

Margin

Enable margin on all sides

marginB

Margin

Enable only bottom margin

marginT

Margin

Enable only top margin

marginX

Margin

Enable only horizontal (inline) margin

marginY

Margin

Enable only vertical (block) margin

noMargin

Margin

Disable margin (reset to 0)

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

borderE

Border

Enable border on the inline-end side (right in LTR, left in RTL)

borderL

Border

Enable border on left

borderR

Border

Enable border on right

borderS

Border

Enable border on the inline-start side (left in LTR, right in RTL)

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

ContainerSectionRowColStackCardDividerImgTable

On this page

GridBasic usageColumn countsResponsive columnsSizesAppearancesVariantsShapesWith gapCustomizingGrid Props