Grid
Flexible grid layout
Import: import { Grid } from 'react-native-mantine';
Usage
import { Grid, Paper, Text } from 'react-native-mantine';
<Grid gutter="md">
<Grid.Col span={8}>
<Paper p="md"><Text>Main</Text></Paper>
</Grid.Col>
<Grid.Col span={4}>
<Paper p="md"><Text>Sidebar</Text></Paper>
</Grid.Col>
</Grid>Props
| Prop | Type | Default | Description |
|---|---|---|---|
columns | number | Number of columns in the grid | |
gutter | MantineNumberSize | Spacing between columns and rows | |
grow | boolean | Grow columns to fit available space | |
align | 'stretch' | 'center' | 'flex-start' | 'flex-end' | Align items vertically | |
justify | 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | Justify items horizontally | |
children | React.ReactNode | Grid children | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |