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

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.

Extra Small Grid3

Item 1

Item 2

Item 3

Large Grid3

Item 1

Item 2

Item 3

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

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

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>