react-gridit
React grid using CSS Grid and styled-components
Install
npm i react-griditor
yarn add react-griditExamples
You can run the examples locally by doing npm run examples.
Rows
<GridRows minSize="20px"> <Block size="1fr">1</Block> <Block size="2fr">2</Block> <Block size="3fr">3</Block> <Block size="4fr">4</Block> <Block size="5fr">5</Block> </GridRows>Output:
Columns
<GridColumns minSize="50px"> <Block size="1fr">1</Block> <Block size="2fr">2</Block> <Block size="3fr">3</Block> <Block size="4fr">4</Block> <Block size="5fr">5</Block> </GridColumns>
Nesting
<GridRows minSize="20px"> <GridColumns> <Block size="1fr">1</Block> <Block size="3fr">3</Block> </GridColumns> <GridColumns> <Block size="1fr">1</Block> </GridColumns> <GridColumns> <Block size="1fr">1</Block> <Block size="4fr">4</Block> <Block size="2fr">2</Block> </GridColumns> </GridRows>
Areas
<GridArea area={` "header header header header" "sidebar . main1 main2" "sidebar footer footer footer" `} > <Block header>Header</Block> <Block sidebar>Sidebar</Block> <Block main1>Main1</Block> <Block main2>Main2</Block> <Block footer>Footer</Block> </GridArea>Output:
Responsive areas
<GridArea area={` "a b" "c d" `} query="(max-width: 599px)" fallbackArea={`"a b c d"`} > <Block a>A</Block> <Block b>B</Block> <Block c>C</Block> <Block d>D</Block> </GridArea>Output (match):
Output (no match):
License
MIT
