CSS-Grid-ReactJS

React layout component based on CSS Grid Spec

Storybook Examples

API Styleguide

Code Sandbox Example

npm i css-grid-reactjs
or
yarn add css-grid-reactjs

import { HeaderRow, HeaderCell, Cell, Grid, Row } from "css-grid-reactjs";
import "css-grid-reactjs/dist/lib.css";

const onSort = (field: string) => {
    console.log(`onSort has been called for data-field:${field}`);
};

<Grid>
    <HeaderRow>
        <HeaderCell onSort={onSort} dataField="name">
            Name
        </HeaderCell>
        <HeaderCell dataField="address">Address</HeaderCell>
    </HeaderRow>
    <Row>
        <Cell>John Doe</Cell>
        <Cell>23 Randolph St</Cell>
    </Row>
    <Row>
        <Cell>Dexter White</Cell>
        <Cell>918 Windsor Avenue</Cell>
    </Row>
</Grid>;

Features

• Typescript support.
• No media queries, purely based on css-grid spec.
• Fully declarative.
• Simple and liner API.
• Responsive by default without any additional css.
• Allows Fixed size gird with scrollbar on content overflow.
• Allow full customization of styles.
• Supports up to 30 grid columns without distorting UI.

TODO

• Improve Docs & Examples.
• Pagination component.
• Add unit-tests.

Browser Support

See http://caniuse.com/#feat=css-grid

Related

• React CSS Grid

MIT License