Simple and useful react grid components, here is a live demo.
Recipes
- @xstyled/styled-components
- styled-components
Install
yarn add react-declarative-grid
Import
import Grid from "react-declarative-grid";
Usage
<Grid ="100px 100px" ="100px 100px" = = > <Square /> <Square /> <Square /> <Square /></Grid>
Breakpoints
If you want to use the grid props with different breakpoints, you can just pass it as object, in the example below the grid-template-rows
will be 1fr
from the size 0px and 100px 100px
from size 500px.
<Grid = = = => <Square /> <Square /> <Square /> <Square /></Grid>
API
Here you can see all props and their equivalent in css:
rows means grid-template-rows
cols means grid-template-columns
xgap means grid-row-gap
ygap means grid-column-gap
gap means grid-gap
areas means grid-template-areas
area means grid-area
rem is a boolean means use rem
instead of px
while using xgap, ygap or gap (by default it's px
)
@xstyled
Actually you can also pass all xstyled Box props.