react-gridit

React grid using CSS Grid and styled-components

Install

npm i react-gridit

or

yarn add react-gridit

Examples

or checkout the examples React app.

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