SimpleGrid
Auto-responsive grid layout
Import: import { SimpleGrid } from 'react-native-mantine';
Usage
import { SimpleGrid, Paper, Text } from 'react-native-mantine';
<SimpleGrid
cols={3}
spacing="md"
breakpoints={[{ maxWidth: 600, cols: 1 }]}
>
<Paper p="md"><Text>1</Text></Paper>
<Paper p="md"><Text>2</Text></Paper>
<Paper p="md"><Text>3</Text></Paper>
</SimpleGrid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cols | number | 1 | Number of columns |
spacing | MantineNumberSize | 'md' | Spacing between columns and rows |
verticalSpacing | MantineNumberSize | Spacing between rows, defaults to spacing value | |
breakpoints | Array<{ maxWidth: number; cols: number; spacing?: MantineNumberSize }> | Breakpoints for responsive columns | |
children | React.ReactNode | Children to render in grid | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |