react-gridit

0.3.2 • Public • Published

react-gridit

react-gridit

React grid using CSS Grid and styled-components

Install

npm i react-gridit

or

yarn add react-gridit

Examples

Codesandbox 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:

react-gridit-rows

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>
react-gridit-columns

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>
react-gridit-nesting

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:

react-gridit-area

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):

react-gridit-area-responsive-match

Output (no match):

react-gridit-area-responsive-no-match

License

MIT

Package Sidebar

Install

npm i react-gridit

Weekly Downloads

3

Version

0.3.2

License

MIT

Last publish

Collaborators

  • nem035