VaneUI

VaneUI

Layout Components

Grid5

A responsive layout component that creates a five-column grid. Perfect for organizing content into balanced, visually appealing arrangements.

Basic Grid5

A five-column grid layout that automatically wraps items.

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

BasicGrid5.tsx

<Grid5>
  <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>
  <div className="p-4 bg-gray-100 rounded">Item 9</div>
  <div className="p-4 bg-gray-100 rounded">Item 10</div>
</Grid5>

Grid Sizes

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

Extra Small Grid5

1
2
3
4
5

Large Grid5

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

GridSizes.tsx

<Col lg>
  <div>
    <Text semibold>Extra Small Grid5</Text>
    <Grid5 xs>
      <div className="p-2 bg-gray-100 rounded text-sm">1</div>
      <div className="p-2 bg-gray-100 rounded text-sm">2</div>
      <div className="p-2 bg-gray-100 rounded text-sm">3</div>
      <div className="p-2 bg-gray-100 rounded text-sm">4</div>
      <div className="p-2 bg-gray-100 rounded text-sm">5</div>
    </Grid5>
  </div>
  <div>
    <Text semibold>Large Grid5</Text>
    <Grid5 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>
      <div className="p-6 bg-gray-100 rounded">Item 5</div>
    </Grid5>
  </div>
</Col>

Grid with Gap Control

Control spacing between grid items using gap properties.

No Gap

1
2
3
4
5

With Gap

1
2
3
4
5
react-icon

GridwithGapControl.tsx

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

Grid Appearances

Grids can have different background appearances for visual hierarchy.

Primary Background

Item 1
Item 2
Item 3
Item 4
Item 5

Secondary Background

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

GridAppearances.tsx

<Col lg>
  <div>
    <Text semibold>Primary Background</Text>
    <Grid5 primary>
      <div className="p-4 bg-white rounded shadow-sm">Item 1</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 2</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 3</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 4</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 5</div>
    </Grid5>
  </div>
  <div>
    <Text semibold>Secondary Background</Text>
    <Grid5 secondary>
      <div className="p-4 bg-white rounded shadow-sm">Item 1</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 2</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 3</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 4</div>
      <div className="p-4 bg-white rounded shadow-sm">Item 5</div>
    </Grid5>
  </div>
</Col>

Responsive Grid

Grid5 adapts to different screen sizes, maintaining optimal column distribution.

Feature 1

Responsive design

Feature 2

Flexible layout

Feature 3

Easy to use

Feature 4

Customizable

Feature 5

Modern styling

react-icon

ResponsiveGrid.tsx

<Grid5>
  <div className="p-4 bg-gradient-to-br from-blue-100 to-blue-200 rounded">
    <Text semibold>Feature 1</Text>
    <Text sm>Responsive design</Text>
  </div>
  <div className="p-4 bg-gradient-to-br from-green-100 to-green-200 rounded">
    <Text semibold>Feature 2</Text>
    <Text sm>Flexible layout</Text>
  </div>
  <div className="p-4 bg-gradient-to-br from-purple-100 to-purple-200 rounded">
    <Text semibold>Feature 3</Text>
    <Text sm>Easy to use</Text>
  </div>
  <div className="p-4 bg-gradient-to-br from-orange-100 to-orange-200 rounded">
    <Text semibold>Feature 4</Text>
    <Text sm>Customizable</Text>
  </div>
  <div className="p-4 bg-gradient-to-br from-pink-100 to-pink-200 rounded">
    <Text semibold>Feature 5</Text>
    <Text sm>Modern styling</Text>
  </div>
</Grid5>

Grid5 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

    Grid5

    Basic Grid5

    Grid Sizes

    Grid with Gap Control

    Grid Appearances

    Responsive Grid

    Grid5 Props

    size

    hide

    items

    justify

    position

    display

    overflow

    wrap

    gap

    flexDirection

    reverse

    appearance

    transparent

    variant