Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jxnblk/react-css-grid
React layout component based on CSS Grid Layout and built with styled-components
https://github.com/jxnblk/react-css-grid
css-grid css-grid-layout grid-layout layout react react-component styled-components
Last synced: 12 days ago
JSON representation
React layout component based on CSS Grid Layout and built with styled-components
- Host: GitHub
- URL: https://github.com/jxnblk/react-css-grid
- Owner: jxnblk
- License: mit
- Created: 2016-07-31T05:04:40.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-24T19:16:16.000Z (about 7 years ago)
- Last Synced: 2024-10-19T19:19:38.869Z (24 days ago)
- Topics: css-grid, css-grid-layout, grid-layout, layout, react, react-component, styled-components
- Language: JavaScript
- Homepage: http://jxnblk.com/react-css-grid
- Size: 265 KB
- Stars: 241
- Watchers: 5
- Forks: 14
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# React CSS Grid
React layout component based on [CSS Grid Layout][spec] and built with [styled-components][sc]
[![Build Status][travis-badge]][travis]
[![GitHub][stars]][gh]
[Demo](http://jxnblk.com/react-css-grid/docs)
[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
[gh]: https://github.com/jxnblk/react-css-grid
[stars]: https://img.shields.io/github/stars/jxnblk/react-css-grid.svg?style=social&label=Star
```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 (
Column
Column
Column
Column
)
}
}
```
## Features
- Responsive grid layout with zero media queries
- Simple API for handling tiled layouts
- Customizable column width and gutters
## Props
### `width` (number or string)
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
```
### `gap` (number or string)
Sets the gutter (`grid-gap`) between columns.
Pass a number for pixel values or a string for any other valid CSS length.
```jsx
```
### `align` (string)
Sets `align-items` to control child element alignment.
## Browser Support
See http://caniuse.com/#feat=css-grid
## Related
- [Grid Styled](https://github.com/jxnblk/grid-styled)
- [Styled System](https://github.com/jxnblk/styled-system)
- [styled-components][sc]
- [CSS Grid Layout Module][spec]
- [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
- [Grid by Example](https://gridbyexample.com/video/series-auto-fill-auto-fit/)
- [Spring Into CSS Grid](http://jonibologna.com/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
[MIT License](LICENSE.md)