Discover a powerful Grid component for React & React Native with customizable layout and behavior. Perfect for creating responsive grid layouts in your UI design. This is an illustration of Grid component.

Installation

Run the following command:

npx gluestack-ui add grid

API Reference

To use this component in your project, include the following import statement in your file.

import { Grid, GridItem } from '@/components/ui/grid';

export default () => (
  <Grid>
    <GridItem />
  </Grid>
);

Important Note

Note: Our responsive grid component is based on a 12-column grid layout. It follows the CSS grid system on the web and flexbox layout on native devices. Since the grid layout is only supported on the web, passing the grid-cols and col-span classNames inside _extra is recommended for the grid component to work effortlessly on both web and native. Our grid component currently does not support rowSpan.

Important Note

Note: The immediate parent of GridItem must be Grid. There should be no higher-order component (HOC) between them.

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Grid

Renders a <div /> on web and a View on native.

Platform	Output
Web	<div />
Native	<View />

Props

Prop	Type	Default	Description
_extra	object	-	Accepts grid-cols-* className. Value for * can range from 1 to 12. Default value is grid-cols-12.

GridItem

Renders a <div /> on web and a View on native.

Platform	Output
Web	<div />
Native	<View />

Props

Prop	Type	Default	Description
_extra	object	-	Accepts col-span-* className. Value for * can range from 1 to 12. Default value is col-span-1.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Setting the gap between grid items

Use the gap-* utilities to change the gap between both rows and columns in grid.

Changing row and column gaps independently

Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows independently.

Nested Grids

The following example depicts how easily you can nest grids to create complex layouts with multiple levels of nesting.

Responsive Grids

You can pass different grid-cols-* and col-span-* values at different breakpoints to create a more responsive layout.

Why we introduced _extra prop?

Grid Layout is not supported in native. In order to make our component universal, we introduced the

_extra

prop to pass the grid classnames to the grid component. We use the

_extra

prop to pass the grid classnames to the grid component & extract the neccessary styles from the provided classname. This approach provides a SSR friendly solution for responsiveness.

Edit this page on GitHub