react-css-grid-layout
react-css-grid-layout copied to clipboard
dlmanning
The CSS Grid Layout wrapped in React components
trafficstars
WARNING: Don't use this unless you know your environment supports CSS Grid Layout!
react-css-grid-layout
React components for wrapping your other react components in CSS Grid Layout inline.
Installation
npm install react-css-grid-layout
Quick Start
Maybe do something like this:
import React from 'react'
import { GridContainer, GridItem } from '../src'
export default function Layout () {
return (
<GridContainer rowTemplate='100px 1fr 1fr'
columnTemplate=`300px 25px 300px`
style={{ height: '100%' }}>
<GridItem rows='2 / 3' columns='3 / 4'>
<p>Content</p>
</GridItem>
<GridItem rows='1 / 4' columns='1 / 2' style={{ overflowY: 'scroll' }}>
<h1>Sidebar</h1>
</GridItem>
</GridContainer>
)
}
API
<GridContainer />
props (all optional)
Most of the properties are just one-to-one mappings onto the CSS properties. See Resources for more information on using the spec.
| Component Property | CSS property |
|---|---|
rowTemplate: string |
grid-template-rows |
columnTemplate: string |
grid-template-columns |
areasTemplate: string |
grid-area-templates |
style: object
Will be added to the inline styles of the <div> that surrounds your children. Any property you pass will override those set by react-css-grid-layout.
<GridItem />
props (all optional)
Most of the properties are just one-to-one mappings onto the CSS properties.
| Component Property | CSS property |
|---|---|
area: string |
grid-area |
rowStart: number |
grid-row-start |
rowEnd: number |
grid-row-end |
rows: string |
grid-row |
columnStart: number |
grid-column-start |
columnEnd: number |
grid-column-end |
columns: string |
grid-column |
style: object
Will be added to the inline styles of the <div> that surrounds your children. Any property you pass will override those set by react-css-grid-layout.
dlmanning