React layout component based on CSS Grid Layout and built with styled-components
npm install react-css-gridReact layout component based on [CSS Grid Layout][spec] and built with [styled-components][sc]
[![Build Status][travis-badge]][travis]
http://jxnblk.com/react-css-grid
[travis-badge]: https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square
[travis]: https://travis-ci.org/jxnblk/react-css-grid
``sh`
npm i react-css-grid
`jsx
// Example usage
import React from 'react'
import Grid from 'react-css-grid'
class App extends React.Component {
render () {
return (
gap={24}>
Features
- Responsive grid layout with zero media queries
- Simple API for handling tiled layouts
- Customizable column width and gutters
Props
$3
Sets the width at which child elements will break into columns.
Pass a number for pixel values or a string for any other valid CSS length.
jsx
`$3
Sets the gutter (
) between columns.
Pass a number for pixel values or a string for any other valid CSS length.`jsx
`$3
Sets
See http://caniuse.com/#feat=css-grid
- Grid Styled
- Styled System
- [styled-components][sc]
- [CSS Grid Layout Module][spec]
- CSS Grid Layout on MDN
- Grid by Example
- Spring Into CSS Grid
[spec]: https://www.w3.org/TR/css-grid-1/
[demo]: http://jxnblk.com/react-css-grid/
[sc]: https://styled-components.com