Skip to main content

Grid

The Grid component is a scrollable layout that arranges items in a 2D grid with customizable vertical (mainAxisSpacing) and horizontal (crossAxisSpacing) spacing.

Vector icon

Usage​

import {
  Box,
  ContentSafeAreaView,
  Grid,
  Screen,
  Text,
} from '@/components';
import theme from '@/theme';
import React from 'react';

const Example = () => {

  const dummyItems = [
    'Apples',
    'Bananas',
    'Cherries',
    'Dates',
    'Eggplants',
    'Figs',
    'Grapes',
    'Honeydew',
    'Iceberg Lettuce',
    'Jackfruit',
    'Kiwi',
    'Lemons',
    'Mangoes',
    'Nectarines',
    'Oranges',
    'Papayas',
    'Quinces',
    'Raspberries',
    'Strawberries',
    'Tomatoes',
  ];

  return (
    <Screen background="primary50" safeAreaEdges={['top']}>
      <ContentSafeAreaView >
        <Grid crossAxisCount={1} mainAxisSpacing={5} crossAxisSpacing={5}>
          {dummyItems.map((item, index) => (
            <Box
              key={index}
              bg="primary300"
              height={theme.sizes.safeWidth / 3}
              borderRadius="rounded-sm"
              alignItems="center"
              justifyContent="center">
              <Text>{item}</Text>
            </Box>
          ))}
        </Grid>
      </ContentSafeAreaView>
    </Screen>
  );
};

export default Example;

Props​

crossAxisCount (required)​

Type: number

Number of items per row (columns)

mainAxisSpacing​

Type: keyof typeof theme.spacing

Vertical spacing between rows

mainAxisSpacing​

Type: keyof typeof theme.spacing

Horizontal spacing between items in a row

children​

Type: ReactNode

🧩 Notes

  • If there are fewer items than needed to fill the last row, empty Box placeholders ensure layout alignment.

  • Grid uses ScrollView, so it's optimized for vertical scroll performance.

  • All spacing props accept values from your theme.spacing.