🚀ReacUI is currently in Beta. We're actively improving it! ❣️

Grid

A flexible grid layout system built on CSS Grid with responsive capabilities

Installation

The Grid component is part of the ReacUI library. Install the package to use it in your project.

npm install reacui

Import

Import the Grid components into your React component.

import { Grid, GridItem } from 'reacui';

Basic Usage

The Grid component uses CSS Grid to create flexible layouts. You can specify the number of columns and gap size.

<Grid columns={2} gap={4}>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">1</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">2</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">3</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">4</div>
</Grid>

Responsive Grid

You can make a grid responsive by specifying different column counts at various breakpoints.

<Grid columns={1} sm={2} md={3} lg={4} gap={4}>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">1</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">2</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">3</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">4</div>
</Grid>

Grid Items

Use GridItem to control how individual items span across rows and columns of the grid.

Span 2 columns

1 column

Span 2 columns

<Grid columns={3} gap={4}>
  <GridItem colSpan={2}>
    <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">Span 2 columns</div>
  </GridItem>
  <GridItem>
    <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">1 column</div>
  </GridItem>
  <GridItem>
    <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">1 column</div>
  </GridItem>
  <GridItem colSpan={2}>
    <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">Span 2 columns</div>
  </GridItem>
</Grid>

Grid Alignment

Control how items are aligned within the grid using alignment properties.

<Grid 
  columns={3} 
  gap={4} 
  alignItems="center" 
  justifyItems="center"
  className="h-32"
>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">1</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">2</div>
  <div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-lg">3</div>
</Grid>

API Reference

The following props are available for the Grid and GridItem components.

Grid Props

Prop	Type	Default	Description
columns	number	1	Number of columns in the grid
gap	number	4	Space between grid items (in Tailwind's spacing scale)
rowGap	number	-	Space between rows (overrides gap for rows)
columnGap	number	-	Space between columns (overrides gap for columns)
sm	number	-	Number of columns at the small breakpoint
md	number	-	Number of columns at the medium breakpoint
lg	number	-	Number of columns at the large breakpoint
xl	-	-	Number of columns at the extra-large breakpoint
alignItems	string	'stretch'	Vertical alignment of items: 'start', 'center', 'end', 'stretch'
justifyItems	string	'start'	Horizontal alignment of items: 'start', 'center', 'end', 'stretch'
justifyContent	string	'start'	Content distribution along the horizontal axis
alignContent	string	'start'	Content distribution along the vertical axis

GridItem Props

Prop	Type	Default	Description
colSpan	number	1	Number of columns this item should span
rowSpan	number	1	Number of rows this item should span
colStart	number	-	Column start position (1-based)
colEnd	number	-	Column end position (inclusive)
rowStart	number	-	Row start position (1-based)
rowEnd	number	-	Row end position (inclusive)