React grid using CSS Grid and styled-components
npm i react-griditor
yarn add react-gridit
You can run the examples locally by doing npm run examples.
<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:
<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>
<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>
<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:
<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):
MIT