VaneUI

VaneUI

Layout Components

Grid3

A specialized layout component for creating a responsive three-column grid. It simplifies the arrangement of content into a balanced and organized structure.

Basic Grid3

A three-column grid layout.

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

BasicGrid3.tsx

<Grid3>
  <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>
</Grid3>

Grid Sizes

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

Extra Small Grid3

Item 1
Item 2
Item 3

Large Grid3

Item 1
Item 2
Item 3
react-icon

GridSizes.tsx

<Col lg>
  <div>
    <Text semibold>Extra Small Grid3</Text>
    <Grid3 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>
    </Grid3>
  </div>
  <div>
    <Text semibold>Large Grid3</Text>
    <Grid3 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>
    </Grid3>
  </div>
</Col>

Grid with Gap

Control spacing between grid items.

No Gap

Item 1
Item 2
Item 3

With Gap

Item 1
Item 2
Item 3
react-icon

GridwithGap.tsx

<Col lg>
  <div>
    <Text semibold>No Gap</Text>
    <Grid3 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>
    </Grid3>
  </div>
  <div>
    <Text semibold>With Gap</Text>
    <Grid3 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>
    </Grid3>
  </div>
</Col>

Grid Appearances

Grids can have different background appearances.

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

GridAppearances.tsx

<Col lg>
  <Grid3 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>
  </Grid3>
  <Grid3 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>
  </Grid3>
</Col>

Grid3 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

    Grid3

    Basic Grid3

    Grid Sizes

    Grid with Gap

    Grid Appearances

    Grid3 Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    appearance

    transparent

    variant