Grid
Quick start
Here's a quick start guide to get started with the Grid component
Importing Grid
import { Grid } from "@hover-design/react";
Code Snippets and Examples
Grid Default
<Grid>
<div>Grid 1</div>
<div>Grid 2</div>
</Grid>
Grid 1
Grid 2
Grid Template Columns
<Grid columnGap="12px" gridTemplateColumns="200px 200px 200px">
<div>Grid 1</div>
<div>Grid 2</div>
<div>Grid 3</div>
<div>Grid 4</div>
<div>Grid 5</div>
</Grid>
Grid 1
Grid 2
Grid 3
Grid 4
Grid 5
Grid Template Rows
<Grid gap="12px" gridTemplateRows="200px 200px 200px">
<div>Grid 1</div>
<div>Grid 2</div>
<div>Grid 3</div>
<div>Grid 4</div>
<div>Grid 5</div>
</Grid>
Grid 1
Grid 2
Grid 3
Grid 4
Grid 5
Other properties
<Grid
columnGap="12px"
gridAutoRows="100px"
gridTemplateColumns="repeat(3, 1fr)"
gap="20px"
>
<div>Grid 1</div>
<div>Grid 2</div>
<div>Grid 3</div>
<div>Grid 4</div>
<div>Grid 5</div>
<div>Grid 6</div>
<div>Grid 7</div>
</Grid>
Grid 1
Grid 2
Grid 3
Grid 4
Grid 5
Grid 6
Grid 7