<Grid />
The
Grid
component is for building 2-dimensional layers (based on CSS grid).<Grid
columns={[2, 3, 4, 6]}
gap={[1, 1, 2, 3]}
padding={4}
>
<Card padding={3}>
<Text>1</Text>
</Card>
<Card padding={3}>
<Text>2</Text>
</Card>
<Card padding={3}>
<Text>3</Text>
</Card>
<Card padding={3}>
<Text>4</Text>
</Card>
<Card padding={3}>
<Text>5</Text>
</Card>
<Card padding={3}>
<Text>6</Text>
</Card>
<Card padding={3}>
<Text>7</Text>
</Card>
<Card padding={3}>
<Text>8</Text>
</Card>
<Card padding={3}>
<Text>9</Text>
</Card>
<Card padding={3}>
<Text>10</Text>
</Card>
<Card padding={3}>
autoRows?: 'auto' | 'min' | 'max' | 'fr'
autoCols?: 'auto' | 'min' | 'max' | 'fr'
autoFlow?: 'row' | 'column' | 'row dense' | 'column dense'
columns?: number | number[]
gap?: number | number[]
rows?: number | number[]