VaneUI

VaneUI

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.

Basic Grid4

A four-column grid layout.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
react-icon

BasicGrid4.tsx

<Grid4>
  <div className="p-4 bg-gray-100 rounded">Item 1</div>
  <div className="p-4 bg-gray-100 rounded">Item 2</div>
  <div className="p-4 bg-gray-100 rounded">Item 3</div>
  <div className="p-4 bg-gray-100 rounded">Item 4</div>
  <div className="p-4 bg-gray-100 rounded">Item 5</div>
  <div className="p-4 bg-gray-100 rounded">Item 6</div>
  <div className="p-4 bg-gray-100 rounded">Item 7</div>
  <div className="p-4 bg-gray-100 rounded">Item 8</div>
</Grid4>

Grid Sizes

Grids come in different sizes such as xs, sm, md, lg, xl.

Extra Small Grid4

Item 1
Item 2
Item 3
Item 4

Large Grid4

Item 1
Item 2
Item 3
Item 4
react-icon

GridSizes.tsx

<Col lg>
  <div>
    <Text semibold>Extra Small Grid4</Text>
    <Grid4 xs>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 1</div>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 2</div>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 3</div>
      <div className="p-2 bg-gray-100 rounded text-sm">Item 4</div>
    </Grid4>
  </div>
  <div>
    <Text semibold>Large Grid4</Text>
    <Grid4 lg>
      <div className="p-6 bg-gray-100 rounded">Item 1</div>
      <div className="p-6 bg-gray-100 rounded">Item 2</div>
      <div className="p-6 bg-gray-100 rounded">Item 3</div>
      <div className="p-6 bg-gray-100 rounded">Item 4</div>
    </Grid4>
  </div>
</Col>

Grid with Gap

Control spacing between grid items.

No Gap

Item 1
Item 2
Item 3
Item 4

With Gap

Item 1
Item 2
Item 3
Item 4
react-icon

GridwithGap.tsx

<Col lg>
  <div>
    <Text semibold>No Gap</Text>
    <Grid4 noGap>
      <div className="p-4 bg-gray-100 border">Item 1</div>
      <div className="p-4 bg-gray-100 border">Item 2</div>
      <div className="p-4 bg-gray-100 border">Item 3</div>
      <div className="p-4 bg-gray-100 border">Item 4</div>
    </Grid4>
  </div>
  <div>
    <Text semibold>With Gap</Text>
    <Grid4 gap>
      <div className="p-4 bg-gray-100 rounded">Item 1</div>
      <div className="p-4 bg-gray-100 rounded">Item 2</div>
      <div className="p-4 bg-gray-100 rounded">Item 3</div>
      <div className="p-4 bg-gray-100 rounded">Item 4</div>
    </Grid4>
  </div>
</Col>

Grid Appearances

Grids can have different background appearances.

Item 1
Item 2
Item 3
Item 4
Item 1
Item 2
Item 3
Item 4
react-icon

GridAppearances.tsx

<Col lg>
  <Grid4 primary>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
    <div className="p-4 bg-white rounded">Item 4</div>
  </Grid4>
  <Grid4 secondary>
    <div className="p-4 bg-white rounded">Item 1</div>
    <div className="p-4 bg-white rounded">Item 2</div>
    <div className="p-4 bg-white rounded">Item 3</div>
    <div className="p-4 bg-white rounded">Item 4</div>
  </Grid4>
</Col>

Grid4 Props

size

  • xs
  • sm
  • md
  • lg
  • xl

    • hide

  • xsHide
  • smHide
  • mdHide
  • lgHide
  • xlHide

    • items

  • itemsStart
  • itemsEnd
  • itemsCenter
  • itemsBaseline
  • itemsStretch

    • justify

  • justifyStart
  • justifyEnd
  • justifyCenter
  • justifyBetween
  • justifyAround
  • justifyEvenly
  • justifyStretch
  • justifyBaseline

    • position

  • relative
  • absolute
  • fixed
  • sticky
  • static

    • display

  • inline
  • block
  • inlineBlock
  • flex
  • inlineFlex
  • grid
  • inlineGrid
  • contents
  • table
  • tableCell
  • hidden

    • overflow

  • overflowAuto
  • overflowHidden
  • overflowClip
  • overflowVisible
  • overflowScroll
  • overflowXAuto
  • overflowYAuto
  • overflowXHidden
  • overflowYHidden
  • overflowXClip
  • overflowYClip
  • overflowXVisible
  • overflowYVisible
  • overflowXScroll
  • overflowYScroll

    • wrap

  • flexWrap
  • flexNoWrap
  • flexWrapReverse

    • gap

  • gap
  • noGap

    • flexDirection

  • row
  • column
  • rowReverse
  • columnReverse

    • reverse

  • reverse

    • appearance

  • default
  • accent
  • primary
  • secondary
  • tertiary
  • success
  • danger
  • warning
  • info
  • link

    • transparent

  • transparent

    • variant

  • filled
  • outline

    • On this page

    Grid4

    Basic Grid4

    Grid Sizes

    Grid with Gap

    Grid Appearances

    Grid4 Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    appearance

    transparent

    variant