├── .babelrc ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE.md ├── README.md ├── docs ├── App.js ├── Bar.js ├── BlockLink.js ├── Button.js ├── Code.js ├── Col.js ├── Flex.js ├── Heading.js ├── Image.js ├── Label.js ├── Link.js ├── List.js ├── Live.js ├── Pre.js ├── Slider.js ├── Text.js ├── Tweet.js ├── bundle.js ├── entry.js └── index.html ├── package.json ├── src └── index.js ├── test.js ├── test.js.md ├── test.js.snap └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "env", 4 | "react" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .nyc_output 3 | coverage 4 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | docs 3 | webpack.config.js 4 | .nyc_output 5 | coverage 6 | test.js* 7 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 8 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | 2 | # The MIT License (MIT) 3 | Copyright (c) 2017 Brent Jackson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # React CSS Grid 3 | 4 | React layout component based on [CSS Grid Layout][spec] and built with [styled-components][sc] 5 | 6 | [![Build Status][travis-badge]][travis] 7 | [![GitHub][stars]][gh] 8 | 9 | [Demo](http://jxnblk.com/react-css-grid/docs) 10 | 11 | [travis-badge]: https://img.shields.io/travis/jxnblk/react-css-grid/master.svg?style=flat-square 12 | [travis]: https://travis-ci.org/jxnblk/react-css-grid 13 | [gh]: https://github.com/jxnblk/react-css-grid 14 | [stars]: https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social&label=Star 15 | 16 | ```sh 17 | npm i react-css-grid 18 | ``` 19 | 20 | ```jsx 21 | // Example usage 22 | import React from 'react' 23 | import Grid from 'react-css-grid' 24 | 25 | class App extends React.Component { 26 | render () { 27 | return ( 28 | 31 |
Column
32 |
Column
33 |
Column
34 |
Column
35 | 36 | ) 37 | } 38 | } 39 | ``` 40 | 41 | 42 | ## Features 43 | 44 | - Responsive grid layout with zero media queries 45 | - Simple API for handling tiled layouts 46 | - Customizable column width and gutters 47 | 48 | 49 | ## Props 50 | 51 | ### `width` (number or string) 52 | 53 | Sets the width at which child elements will break into columns. 54 | Pass a number for pixel values or a string for any other valid CSS length. 55 | 56 | ```jsx 57 | 58 | ``` 59 | 60 | ### `gap` (number or string) 61 | 62 | Sets the gutter (`grid-gap`) between columns. 63 | Pass a number for pixel values or a string for any other valid CSS length. 64 | 65 | ```jsx 66 | 67 | ``` 68 | 69 | ### `align` (string) 70 | 71 | Sets `align-items` to control child element alignment. 72 | 73 | 74 | ## Browser Support 75 | 76 | See http://caniuse.com/#feat=css-grid 77 | 78 | 79 | ## Related 80 | 81 | - [Grid Styled](https://github.com/jxnblk/grid-styled) 82 | - [Styled System](https://github.com/jxnblk/styled-system) 83 | - [styled-components][sc] 84 | - [CSS Grid Layout Module][spec] 85 | - [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) 86 | - [Grid by Example](https://gridbyexample.com/video/series-auto-fill-auto-fit/) 87 | - [Spring Into CSS Grid](http://jonibologna.com/spring-into-css-grid/) 88 | 89 | 90 | [spec]: https://www.w3.org/TR/css-grid-1/ 91 | [demo]: http://jxnblk.com/react-css-grid/ 92 | [sc]: https://styled-components.com 93 | 94 | [MIT License](LICENSE.md) 95 | -------------------------------------------------------------------------------- /docs/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { createProvider } from 'refunk' 3 | import XRay from 'react-x-ray' 4 | import Grid from 'react-css-grid' 5 | import { Box } from 'grid-styled' 6 | import Bar from './Bar' 7 | import Button from './Button' 8 | import Label from './Label' 9 | import Slider from './Slider' 10 | import Col from './Col' 11 | import Heading from './Heading' 12 | import Pre from './Pre' 13 | import Text from './Text' 14 | import Link from './Link' 15 | import Flex from './Flex' 16 | import BlockLink from './BlockLink' 17 | import Image from './Image' 18 | import Tweet from './Tweet' 19 | import Code from './Code' 20 | import List from './List' 21 | import Live from './Live' 22 | 23 | const App = props => ( 24 | 25 | 26 | 30 | 31 | 32 | props.update(handleWidthChange(e.target.value))} 38 | /> 39 | 40 | 41 | 42 | props.update(handleGapChange(e.target.value))} 49 | /> 50 | 51 |