import { SimpleGrid } from '@uhg-abyss/mobile/ui/SimpleGrid';

SimpleGrid lays children out in equal-width columns. Set cols for how many columns; children flow into them automatically.

cols

gap

rowGap

Default

() => {
  return (
    <SimpleGrid cols={3}>
      {[1, 2, 3, 4, 5, 6].map((n) => {
        return (
          <Box key={n} color="$semantic.color.surface.container.primary">
            <Text color="$semantic.color.text.body.alt">{n}</Text>
          </Box>
        );
      })}
    </SimpleGrid>
  );
};

Cols

The number of equal-width columns, as a plain number.

Gap and rowGap

gap sets spacing between rows and columns; rowGap overrides the vertical spacing. Both accept a $core.spacing.* token or a raw number in dp.

minColWidth

Set minColWidth (in dp) to fit as many equal columns as possible while keeping each column at least that wide. When set, cols is ignored.

SimpleGrid Props

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	The elements to lay out in equal-width columns. Each is wrapped so it can be sized to an equal share of the row.
cols	number | undefined	1	-	The number of equal-width columns.
gap	Abyss.Space | undefined	'$core.spacing.200'	-	The space between rows and columns — a spacing token or a raw number.
minColWidth	number | undefined	-	-	Minimum column width (in dp). When set, cols is ignored and the grid fits as many equal columns as possible while keeping each column at least this wide — the React Native equivalent of the web auto-fill behaviour.
rowGap	Abyss.Space | undefined	-	-	Row gap — overrides gap for vertical spacing between rows. A spacing token or a raw number.

Below are the link(s) to the relevant GitHub type files:

SimpleGrid.types.ts

SimpleGrid Classes

Class Name	Description
abyss-simple-grid-root	SimpleGrid root element