Layout Components

Grid2

A responsive layout component for creating a two-column grid. Ideal for side-by-side content layouts and balanced arrangements.

Source Edit this page

A responsive layout component that arranges its children in a two-column CSS grid. Ideal for side-by-side content layouts and balanced arrangements.

When to Use

Two-up feature comparisons, pricing tiers, or product highlights.
Side-by-side cards (image + details, before/after, problem/solution).
Splitting a section into two equal columns without writing custom flex math.

When NOT to Use

For two children that should align in a single line — use Row and let flexbox size them.
For 3+ columns — use Grid3–Grid6.
For column-spanning layouts — use raw CSS grid with className instead.

Customizing

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

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

<ThemeProvider themeDefaults={{
  grid2: { lg: true },
}}>
  <Grid2>{/* ... */}</Grid2>
</ThemeProvider>

Basic Grid2

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

Item 1

Two-column layout

Item 2

Balanced columns

Item 3

Wraps to next row

Item 4

Equal widths

<Grid2>
  <Card>
    <Title>Item 1</Title>
    <Text>Two-column layout</Text>
  </Card>
  <Card>
    <Title>Item 2</Title>
    <Text>Balanced columns</Text>
  </Card>
  <Card>
    <Title>Item 3</Title>
    <Text>Wraps to next row</Text>
  </Card>
  <Card>
    <Title>Item 4</Title>
    <Text>Equal widths</Text>
  </Card>
</Grid2>

Grid Sizes

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

Item 1

Item 2

Item 1

Item 2

md (default)

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

<Col>
  <Text semibold>xs</Text>
  <Grid2 xs>
    <Card xs><Text xs>Item 1</Text></Card>
    <Card xs><Text xs>Item 2</Text></Card>
  </Grid2>
  <Text semibold>sm</Text>
  <Grid2 sm>
    <Card sm><Text sm>Item 1</Text></Card>
    <Card sm><Text sm>Item 2</Text></Card>
  </Grid2>
  <Text semibold>md (default)</Text>
  <Grid2>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Text semibold>lg</Text>
  <Grid2 lg>
    <Card lg><Text lg>Item 1</Text></Card>
    <Card lg><Text lg>Item 2</Text></Card>
  </Grid2>
  <Text semibold>xl</Text>
  <Grid2 xl>
    <Card xl><Text xl>Item 1</Text></Card>
    <Card xl><Text xl>Item 2</Text></Card>
  </Grid2>
</Col>

Grid with Gap

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

Default gap

Item 1

Item 2

noGap

Item 1

Item 2

<Col>
  <Text semibold>Default gap</Text>
  <Grid2>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Text semibold>noGap</Text>
  <Grid2 noGap>
    <Card sharp><Text>Item 1</Text></Card>
    <Card sharp><Text>Item 2</Text></Card>
  </Grid2>
</Col>

Grid Appearances

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

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

Item 1

Item 2

<Col>
  <Grid2 filled primary>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Grid2 filled secondary>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Grid2 filled success>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Grid2 filled warning>
    <Card><Text>Item 1</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
</Col>

Grid Variants

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

Filled primary

Item 2

Outline success

Item 2

<Col>
  <Grid2 filled primary>
    <Card><Text>Filled primary</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Grid2 border success>
    <Card><Text>Outline success</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
</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

Rounded

Item 2

<Col>
  <Grid2 filled secondary sharp padding>
    <Card><Text>Sharp (default)</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
  <Grid2 filled secondary rounded padding>
    <Card><Text>Rounded</Text></Card>
    <Card><Text>Item 2</Text></Card>
  </Grid2>
</Col>

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