Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit ecf4d98

Browse files
committed
Edit readme
1 parent 0ef9e05 commit ecf4d98

File tree

7 files changed

+66
-13
lines changed

7 files changed

+66
-13
lines changed

‎.travis.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
language: node_js
22
node_js:
3-
- 6.2
3+
- 8

‎LICENSE.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
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+

‎README.md

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11

22
# React CSS Grid
33

4-
React layout component based on [CSS Grid Layout][spec]
4+
React layout component based on [CSS Grid Layout][spec] ([Demo][demo])
55

66
[![Build Status][travis-badge]][travis]
77

@@ -33,10 +33,35 @@ class App extends React.Component {
3333
}
3434
```
3535

36+
3637
## Features
3738

38-
- Simple, encapsulated grid layout API
39+
- Responsive grid layout with zero media queries
40+
- Simple API for handling tiled layouts
41+
- Customizable column width and gutters
42+
43+
44+
## Props
45+
46+
- `width` (number or string) width at which child elements will break into columns - either a number pixel value or any valid CSS width value as a string
47+
- `gap` (number or string) gutter (`grid-gap`) between columns - either a number pixel value or any valid CSS width value as a string
48+
49+
50+
## Browser Support
51+
52+
See http://caniuse.com/#feat=css-grid
53+
54+
## Related
55+
56+
- [Grid Styled](https://github.com/jxnblk/grid-styled)
57+
- [styled-components](https://github.com/styled-components/styled-components)
58+
- [CSS Grid Layout Module][spec]
59+
- [CSS Grid Layout on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
60+
- [Grid by Example](https://gridbyexample.com/video/series-auto-fill-auto-fit/)
61+
- [Spring Into CSS Grid](http://jonibologna.com/spring-into-css-grid/)
62+
3963

4064
[spec]: https://www.w3.org/TR/css-grid-1/
65+
[demo]: http://jxnblk.com/react-css-grid/
4166

42-
MIT License
67+
[MIT License](LICENSE.md)

‎src/index.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,30 +7,30 @@ const width = props => ({
77
gridTemplateColumns: `repeat(auto-fit, minmax(${px(props.width)}, 1fr))`
88
})
99

10-
const gutter = props => ({
11-
gridGap: px(props.gutter)
10+
const gap = props => ({
11+
gridGap: px(props.gap)
1212
})
1313

1414
const Grid = styled.div`
1515
display: grid;
1616
${width}
17-
${gutter}
17+
${gap}
1818
`
1919

2020
Grid.propTypes = {
2121
width: PropTypes.oneOfType([
2222
PropTypes.number,
2323
PropTypes.string
2424
]).isRequired,
25-
gutter: PropTypes.oneOfType([
25+
gap: PropTypes.oneOfType([
2626
PropTypes.number,
2727
PropTypes.string
2828
]).isRequired
2929
}
3030

3131
Grid.defaultProps = {
3232
width: 256,
33-
gutter: 32
33+
gap: 32
3434
}
3535

3636
export default Grid

‎test.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ test('renders with string width prop', t => {
1818
t.snapshot(a)
1919
})
2020

21-
test('renders with gutter prop', t => {
22-
const a = render(<Grid gutter={16} />).toJSON()
21+
test('renders with gap prop', t => {
22+
const a = render(<Grid gap={16} />).toJSON()
2323
t.snapshot(a)
2424
})
2525

26-
test('renders with string gutter prop', t => {
27-
const a = render(<Grid gutter='1em' />).toJSON()
26+
test('renders with string gap prop', t => {
27+
const a = render(<Grid gap='1em' />).toJSON()
2828
t.snapshot(a)
2929
})

‎test.js.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,22 @@ Generated by [AVA](https://ava.li).
4747
<div
4848
className="sc-bdVaJa eMRWET"
4949
width={320}
50+
/
51+
52+
## renders with gap prop
53+
54+
> Snapshot 1
55+
56+
<div
57+
className="sc-bdVaJa hMURNT"
58+
width={256}
5059
/>
60+
61+
## renders with string gap prop
62+
63+
> Snapshot 1
64+
65+
<div
66+
className="sc-bdVaJa hBZALA"
67+
width={256}
68+
/>

‎test.js.snap

50 Bytes
Binary file not shown.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /