Skip to main content

Grid

The Grid component is a layout utility in the Pearl UI library. It arranges its children into rows and columns, giving each child an equal amount of space. By default, it renders a Box element, which is a fundamental building block in Pearl UI.

info

For rendering a large number of items in a grid, it's better to use a virtualized component like a FlatList instead of the Grid component. Virtualized components only render items that are currently visible on the screen, which can significantly improve performance for large lists.

Import#

import { Grid } from "pearl-ui";

Usage#

<Grid numCols={3} spacing="4">  <Box>    <Text>Item 1</Text>  </Box>  <Box>    <Text>Item 2</Text>  </Box>  <Box>    <Text>Item 3</Text>  </Box></Grid>

Changing the spacing for columns and rows#

You can change the spacing between columns and rows using the spacingX and spacingY props respectively. Here is an example:

<Grid numCols={3} spacingX="2" spacingY="4">  <Box>    <Text>Item 1</Text>  </Box>  <Box>    <Text>Item 2</Text>  </Box>  <Box>    <Text>Item 3</Text>  </Box></Grid>

This will create a grid with 3 columns, 2 units of spacing between columns, and 4 units of spacing between rows.

Example#

Component Properties#

Supported Style Properties#

The Grid component is built upon the Box component, and as such, it inherits all the properties related to Box.

Additional Properties#

NameRequiredTypeDefaultDescription
numColsNonumber1Number of columns in the grid.
spacingNoPearlTheme["spacing"]"3"The spacing between the grid elements.
spacingXNoPearlTheme["spacing"]The column spacing between the grid elements.
spacingYNoPearlTheme["spacing"]The row spacing between the grid elements.