npm promulgates marsupials

    react-css-grid-layout

    1.0.0 • Public • Published

    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.

    Resources for information about CSS Grid Layout

    Keywords

    none

    Install

    npm i react-css-grid-layout

    DownloadsWeekly Downloads

    2

    Version

    1.0.0

    License

    ISC

    Last publish

    Collaborators

    • dlmanning