1. Primitives
  2. Grid

<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}>

Properties  

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[]
Made withby folks at