>,
42 | any
43 | >;
44 |
45 | export const Grid: GridComponent;
46 | export const Cell: CellComponent;
47 | }
48 |
--------------------------------------------------------------------------------
/website/components/sections/TraditionalGrid.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import { flatMap, range } from "lodash-es";
4 | import Cell from "../DemoCell";
5 | import Grid from "../DemoGrid";
6 | import Example from "../Example";
7 | import Heading from "../Heading";
8 |
9 | const rows = counts =>
10 | flatMap(counts, number =>
11 | range(number).map(i =>
12 | |
13 | {i + 1}/{number}
14 | |
15 | )
16 | );
17 |
18 | const TraditionalGrid = () =>
19 |
20 |
21 | {rows([12, 6, 4, 2, 1])}
22 |
23 | ;
24 |
25 | const code = stripIndent`
26 |
27 | 1/12 |
28 | 2/12 |
29 | ...
30 | 1/6 |
31 | 2/6 |
32 | ...
33 |
34 | `;
35 |
36 | const TraditionalGridSection = () =>
37 |
38 | Traditional Grid
39 |
40 | We have all seen this before, but it is super easy to build with{" "}
41 | styled-css-grid.
42 |
43 |
46 |
47 | {code}
48 |
49 |
50 | }
51 | output={}
52 | path={"website/components/sections/TraditionalGrid.js"}
53 | />
54 | ;
55 |
56 | export default TraditionalGridSection;
57 |
--------------------------------------------------------------------------------
/website/components/Header.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { Grid, Cell } from "../../";
4 | import colors from "../colors";
5 |
6 | const C = Cell.extend`
7 | font-size: 2em;
8 | color: #eeeeee;
9 |
10 | a {
11 | font-size: 1em;
12 | color: #fff;
13 | }
14 |
15 | :nth-of-type(1) {
16 | background: ${colors[0]};
17 | padding-left: 50%;
18 | }
19 | :nth-of-type(2) {
20 | background: ${colors[8]};
21 | }
22 | :nth-of-type(3) {
23 | background: ${colors[2]};
24 | }
25 | :nth-of-type(4) {
26 | background: ${colors[3]};
27 | }
28 | :nth-of-type(5) {
29 | background: ${colors[4]};
30 | padding-right: 50%;
31 | }
32 | `;
33 |
34 | const HeaderContainer = styled.header``;
35 |
36 | const Header = () =>
37 |
38 |
39 |
40 | styled
41 |
42 |
43 |
44 | npm 📦
45 |
46 |
47 |
48 |
49 | GitHub 📘
50 |
51 |
52 |
53 | css
54 |
55 |
56 | grid
57 |
58 |
59 | ;
60 |
61 | export default Header;
62 |
--------------------------------------------------------------------------------
/website/components/sections/Centering.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Example from "../Example";
4 | import Heading from "../Heading";
5 | import Cell from "../DemoCell";
6 | import Grid from "../DemoGrid";
7 |
8 | const Centering = () =>
9 |
10 |
11 |
12 | Default
13 | |
14 |
15 | Middle
16 | |
17 |
18 | Center
19 | |
20 |
21 | Center-Middle
22 | |
23 |
24 | ;
25 |
26 | const code = stripIndent`
27 |
28 | Default |
29 | Middle |
30 | Center |
31 | Center-Middle |
32 |
33 | `;
34 |
35 | const CenteringSection = () =>
36 |
37 | Centering Content
38 |
39 | Centering content (especially verticically) has traditionally been quite
40 | difficult in CSS. styled-css-grid offers two helper props,{" "}
41 | middle and center to simpify the process.
42 |
43 |
46 |
47 | {code}
48 |
49 |
50 | }
51 | output={}
52 | path={"website/components/sections/Centering.js"}
53 | />
54 | ;
55 |
56 | export default CenteringSection;
57 |
--------------------------------------------------------------------------------
/lib/Grid.js:
--------------------------------------------------------------------------------
1 | import styled from "styled-components";
2 | import PropTypes from "prop-types";
3 |
4 | const autoRows = ({ minRowHeight = "20px" }) => `minmax(${minRowHeight}, auto)`;
5 |
6 | const frGetter = value =>
7 | typeof value === "number" ? `repeat(${value}, 1fr)` : value;
8 |
9 | const gap = ({ gap = "8px" }) => gap;
10 |
11 | const flow = ({ flow = "row" }) => flow;
12 |
13 | const formatAreas = areas => areas.map(area => `"${area}"`).join(" ");
14 |
15 | const Grid = styled.div`
16 | display: grid;
17 | height: ${({ height = "auto" }) => height};
18 | grid-auto-flow: ${flow};
19 | grid-auto-rows: ${autoRows};
20 | ${({ rows }) => rows && `grid-template-rows: ${frGetter(rows)}`};
21 | grid-template-columns: ${({ columns = 12 }) => frGetter(columns)};
22 | grid-gap: ${gap};
23 | ${({ columnGap }) => columnGap && `column-gap: ${columnGap}`};
24 | ${({ rowGap }) => rowGap && `row-gap: ${rowGap}`};
25 | ${({ areas }) => areas && `grid-template-areas: ${formatAreas(areas)}`};
26 | ${({ justifyContent }) =>
27 | justifyContent && `justify-content: ${justifyContent}`};
28 | ${({ alignContent }) => alignContent && `align-content: ${alignContent}`};
29 | `;
30 |
31 | Grid.propTypes = {
32 | className: PropTypes.string,
33 | columns: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
34 | gap: PropTypes.string,
35 | columnGap: PropTypes.string,
36 | rowGap: PropTypes.string,
37 | height: PropTypes.string,
38 | minRowHeight: PropTypes.string,
39 | flow: PropTypes.string,
40 | rows: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
41 | areas: PropTypes.arrayOf(PropTypes.string),
42 | justifyContent: PropTypes.string,
43 | alignContent: PropTypes.string
44 | };
45 |
46 | export default Grid;
47 |
--------------------------------------------------------------------------------
/website/components/sections/Positioning.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Cell from "../DemoCell";
4 | import Grid from "../DemoGrid";
5 | import Example from "../Example";
6 | import Heading from "../Heading";
7 | import MdnLink from "../MdnLink";
8 |
9 | const Positioning = () =>
10 |
11 |
12 | Top Left |
13 | Top Right |
14 |
15 | Middle
16 | |
17 | Bottom Left |
18 |
19 | Bottom Right
20 | |
21 |
22 | ;
23 |
24 | const code = stripIndent`
25 |
26 | Top Left |
27 | Top Right |
28 | Middle |
29 | Bottom Left |
30 | Bottom Right |
31 |
32 | `;
33 |
34 | const PositioningSection = () =>
35 |
36 | Positioning
37 |
38 | You can use the left and top props to set the{" "}
39 | grid-column-start and grid-row-start{" "}
40 | CSS properties, respectively. This allows you to offset content or have
41 | finer grain control over the position of cells.
42 |
43 | Keep in mind that the top-left coordinate is (1, 1), not (0, 0).
44 |
47 |
48 | {code}
49 |
50 |
51 | }
52 | output={}
53 | path={"website/components/sections/Positioning.js"}
54 | />
55 | ;
56 |
57 | export default PositioningSection;
58 |
--------------------------------------------------------------------------------
/website/components/sections/TransposedGrid.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import { flatMap, range } from "lodash-es";
4 | import Cell from "../DemoCell";
5 | import Grid from "../DemoGrid";
6 | import Example from "../Example";
7 | import Heading from "../Heading";
8 | import MdnLink from "../MdnLink";
9 |
10 | const columns = counts =>
11 | flatMap(counts, (count, i) =>
12 | range(count).map(number =>
13 |
14 | {number + 1}/{count}
15 | |
16 | )
17 | );
18 |
19 | const TransposedGrid = () =>
20 |
21 |
22 | {columns([12, 6, 4, 2, 1])}
23 |
24 | ;
25 |
26 | const code = stripIndent`
27 |
28 | 1/12 |
29 | 2/12 |
30 | ...
31 | 1/6 |
32 | 2/6 |
33 | ...
34 |
35 | `;
36 |
37 | const TransposedGridSection = () =>
38 |
39 | Transposed Grid
40 |
41 | However, transposing this is difficult without display: grid,
42 | even with flexbox. With styled-css-grid this is made simple!
43 | Just use height instead of width and add{" "}
44 | flow="column" to the Grid component.
45 | This maps directly to the grid-auto-flow CSS property.
46 |
47 |
50 |
51 | {code}
52 |
53 |
54 | }
55 | output={}
56 | path={"website/components/sections/TransposedGrid.js"}
57 | />
58 | ;
59 |
60 | export default TransposedGridSection;
61 |
--------------------------------------------------------------------------------
/website/components/sections/HolyGrail.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Cell from "../DemoCell";
4 | import Grid from "../DemoGrid";
5 | import Example from "../Example";
6 | import Heading from "../Heading";
7 | import MdnLink from "../MdnLink";
8 |
9 | const HolyGrail = () =>
10 |
11 |
15 |
16 | Header
17 | |
18 | Menu |
19 | Content |
20 | Ads |
21 | Footer |
22 |
23 | ;
24 |
25 | const code = stripIndent`
26 |
29 |
30 | Header
31 | |
32 |
33 | Menu |
34 | Content |
35 | Ads |
36 |
37 |
38 | Footer
39 | |
40 |
41 | `;
42 |
43 | const HolyGrailSection = () =>
44 |
45 | Holy Grail Layout
46 |
47 | The{" "}
48 |
49 | Holy Grail
50 | {" "}
51 | layout is trivial using the rows prop. This prop is forwarded
52 | to the grid-template-rows CSS property. In this example
53 | we set the first and last rows to be at least 45px tall, but auto-grow if
54 | the content grows. The middle row is set to 1fr, which will grow to take
55 | up all available space.
56 |
57 |
60 |
61 | {code}
62 |
63 |
64 | }
65 | output={}
66 | path={"website/components/sections/HolyGrail.js"}
67 | />
68 | ;
69 |
70 | export default HolyGrailSection;
71 |
--------------------------------------------------------------------------------
/website/components/sections/Responsive.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Cell from "../DemoCell";
4 | import Grid from "../DemoGrid";
5 | import Example from "../Example";
6 | import Heading from "../Heading";
7 | import MdnLink from "../MdnLink";
8 |
9 | const Responsive = () =>
10 |
11 |
12 | A |
13 | B |
14 | C |
15 | D |
16 | E |
17 | F |
18 |
19 | ;
20 |
21 | const code = stripIndent`
22 |
23 | A |
24 | B |
25 | ...
26 |
27 | `;
28 |
29 | const ResponsiveSection = () =>
30 |
31 | Responsive Layout
32 |
33 | The grid-template-columns CSS property is incredibly
34 | powerful for building responsive content. When the columns{" "}
35 | prop is a number, it is a shorthand for{" "}
36 | grid-template-columns: repeat(N, 1fr). However, when you pass
37 | a string, the value is passed directly to the CSS property, allowing you
38 | leverage the full power of this property.
39 |
40 |
41 | If you're just after basic responsive content that will automatically
42 | fit to your content, you can use{" "}
43 | repeat(auto-fit, minmax(120px, 1fr)) as your{" "}
44 | columns prop, which will create columns to auto-fit your
45 | content with a minimum width of 120px.
46 |
47 | Resize your browser for an example.
48 |
51 |
52 | {code}
53 |
54 |
55 | }
56 | output={}
57 | path={"website/components/sections/Responsive.js"}
58 | />
59 | ;
60 |
61 | export default ResponsiveSection;
62 |
--------------------------------------------------------------------------------
/website/components/sections/Dense.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import styled from "styled-components";
3 | import { stripIndent } from "common-tags";
4 | import Cell from "../DemoCell";
5 | import Grid from "../DemoGrid";
6 | import Example from "../Example";
7 | import Heading from "../Heading";
8 |
9 | const Image = styled.img`
10 | width: 100%;
11 | height: 100%;
12 | `;
13 |
14 | const Dense = () =>
15 |
16 |
17 |
18 | A
19 |
20 | |
21 |
22 | B
23 |
24 | |
25 |
26 | C
27 |
28 | |
29 |
30 | D
31 |
32 | |
33 |
34 | E
35 |
36 | |
37 |
38 | ;
39 |
40 | const code = stripIndent`
41 |
42 |
43 | A 200x100
44 | |
45 |
46 | B 100x200
47 | |
48 |
49 | C 200x100
50 | |
51 |
52 | D 100x100
53 | |
54 |
55 | E 100x100
56 | |
57 |
58 | `;
59 |
60 | const DenseSection = () =>
61 |
62 | Dense Layout
63 |
64 | By default, styled-css-grid set the flow property to{" "}
65 | row. However, by setting it to row dense you can
66 | turn on CSS grid's dense cell packing. Notice how the order of the
67 | cells in the markup is not same when it is rendered!
68 |
69 |
72 |
73 | {code}
74 |
75 |
76 | }
77 | output={}
78 | path={"website/components/sections/Dense.js"}
79 | />
80 | ;
81 |
82 | export default DenseSection;
83 |
--------------------------------------------------------------------------------
/website/components/sections/Areas.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Example from "../Example";
4 | import Heading from "../Heading";
5 | import Cell from "../DemoCell";
6 | import Grid from "../DemoGrid";
7 | import MdnLink from "../MdnLink";
8 |
9 | const Areas = () =>
10 |
11 |
20 | Header |
21 | Content |
22 | Menu |
23 | Ads |
24 | Footer |
25 |
26 | ;
27 |
28 | const code = stripIndent`
29 |
37 | Header |
38 | Content |
39 | Menu |
40 | Ads |
41 | Footer |
42 |
43 | `;
44 |
45 | const AreasSection = () =>
46 |
47 | Areas
48 |
49 | This example takes the holy grail layout and
50 | applies "areas" to it. Using areas means you no longer need to
51 | use width and height on your cells. Instead you
52 | specify areas (which maps to{" "}
53 | grid-template-areas) on your Grid, and use
54 | the names you supplied on the Cells using the{" "}
55 | area prop, which again maps directly to the{" "}
56 | grid-areas CSS property.
57 |
58 |
59 | Notice that this gives you the flexibility to arrange the HTML in a
60 | different order to how it is displayed on screen.
61 |
62 |
65 |
66 | {code}
67 |
68 |
69 | }
70 | output={}
71 | path={"website/components/sections/Areas.js"}
72 | />
73 | ;
74 |
75 | export default AreasSection;
76 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "styled-css-grid",
3 | "version": "0.0.0-development",
4 | "description": "A tiny CSS grid layout for React, built with styled-components",
5 | "homepage": "https://styled-css-grid.js.org",
6 | "main": "dist/styled-css-grid.umd.js",
7 | "module": "dist/styled-css-grid.esm.js",
8 | "repository": "https://github.com/azz/styled-css-grid",
9 | "author": "Lucas Azzola",
10 | "license": "MIT",
11 | "types": "dist/index.d.ts",
12 | "files": [
13 | "dist"
14 | ],
15 | "keywords": [
16 | "grid",
17 | "css",
18 | "react",
19 | "styled-components"
20 | ],
21 | "scripts": {
22 | "lint": "eslint .",
23 | "prettier": "prettier --write \"{lib,website,scripts}/*.js\"",
24 | "test": "jest",
25 | "build": "node scripts/build",
26 | "watch:site": "rollup -c scripts/rollup.website.config.js -w",
27 | "start": "http-server website/bin",
28 | "semantic-release": "semantic-release"
29 | },
30 | "peerDependencies": {
31 | "react": "*",
32 | "react-dom": "*",
33 | "styled-components": "^2 || ^3 || ^4 || ^5 || ^6"
34 | },
35 | "dependencies": {
36 | "prop-types": "^15.6.0"
37 | },
38 | "devDependencies": {
39 | "babel-core": "^6.25.0",
40 | "babel-plugin-external-helpers": "^6.22.0",
41 | "babel-plugin-styled-components": "^1.1.7",
42 | "babel-polyfill": "^6.23.0",
43 | "babel-preset-es2015": "^6.24.1",
44 | "babel-preset-react": "^6.24.1",
45 | "babel-register": "^6.24.1",
46 | "common-tags": "^1.4.0",
47 | "eslint": "^4.3.0",
48 | "eslint-config-prettier": "^2.3.0",
49 | "eslint-plugin-import": "^2.7.0",
50 | "eslint-plugin-prettier": "^2.1.2",
51 | "eslint-plugin-react": "^7.1.0",
52 | "http-server": "^0.10.0",
53 | "jest": "^20.0.4",
54 | "jest-styled-components": "^4.2.2",
55 | "lodash-es": "^4.17.4",
56 | "normalize.css": "^7.0.0",
57 | "prettier": "^1.5.3",
58 | "prismjs": "^1.6.0",
59 | "react": "next",
60 | "react-dom": "next",
61 | "react-test-renderer": "next",
62 | "rollup": "^0.45.2",
63 | "rollup-plugin-babel": "^2.7.1",
64 | "rollup-plugin-commonjs": "^8.0.2",
65 | "rollup-plugin-css-only": "^0.2.0",
66 | "rollup-plugin-node-resolve": "^3.0.0",
67 | "rollup-plugin-replace": "^1.1.1",
68 | "rollup-plugin-uglify": "^2.0.1",
69 | "rollup-watch": "^4.3.1",
70 | "semantic-release": "24.0.0",
71 | "shelljs": "^0.7.8",
72 | "styled-components": "^2.1.1",
73 | "uglify-es": "^3.0.26"
74 | }
75 | }
76 |
--------------------------------------------------------------------------------
/lib/__tests__/Grid.test.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import renderer from "react-test-renderer";
3 | import "jest-styled-components";
4 |
5 | import Grid from "../Grid";
6 |
7 | describe("", () => {
8 | test("matches snapshot with default args", () => {
9 | const tree = renderer.create().toJSON();
10 | expect(tree).toMatchSnapshot();
11 | });
12 |
13 | test("'columns' as number prop sets 'grid-template-columns' to repeat()", () => {
14 | const tree = renderer.create().toJSON();
15 | expect(tree).toHaveStyleRule("grid-template-columns", "repeat(7,1fr)");
16 | });
17 |
18 | test("'columns' as string prop sets 'grid-template-columns'", () => {
19 | const tree = renderer
20 | .create()
21 | .toJSON();
22 | expect(tree).toHaveStyleRule(
23 | "grid-template-columns",
24 | "repeat(auto-fit,minmax(100px,1fr))"
25 | );
26 | });
27 |
28 | test("'rows' as number prop sets 'grid-template-rows' to repeat()", () => {
29 | const tree = renderer.create().toJSON();
30 | expect(tree).toHaveStyleRule("grid-template-rows", "repeat(7,1fr)");
31 | });
32 |
33 | test("'rows' as string prop sets 'grid-template-rows'", () => {
34 | const tree = renderer.create().toJSON();
35 | expect(tree).toHaveStyleRule("grid-template-rows", "1fr 2fr 1fr");
36 | });
37 |
38 | test("'gap' prop sets 'grid-gap'", () => {
39 | const tree = renderer.create().toJSON();
40 | expect(tree).toHaveStyleRule("grid-gap", "7px");
41 | });
42 |
43 | test("'columnGap' prop sets 'column-gap'", () => {
44 | const tree = renderer.create().toJSON();
45 | expect(tree).toHaveStyleRule("column-gap", "7px");
46 | });
47 |
48 | test("'rowGap' prop sets 'row-gap'", () => {
49 | const tree = renderer.create().toJSON();
50 | expect(tree).toHaveStyleRule("row-gap", "7px");
51 | });
52 |
53 | test("'minRowHeight' prop sets 'grid-auto-rows'", () => {
54 | const tree = renderer.create().toJSON();
55 | expect(tree).toHaveStyleRule("grid-auto-rows", "minmax(7px,auto)");
56 | });
57 |
58 | test("'flow' prop sets 'grid-auto-flow'", () => {
59 | const tree = renderer.create().toJSON();
60 | expect(tree).toHaveStyleRule("grid-auto-flow", "column");
61 | });
62 |
63 | test("'areas' array prop sets 'grid-template-areas'", () => {
64 | const tree = renderer.create().toJSON();
65 | expect(tree).toHaveStyleRule("grid-template-areas", '"a a" "b b"');
66 | });
67 |
68 | test("'alignContent' prop sets 'align-content'", () => {
69 | const tree = renderer.create().toJSON();
70 | expect(tree).toHaveStyleRule("align-content", "end");
71 | });
72 |
73 | test("'justifyContent' prop sets 'justify-content'", () => {
74 | const tree = renderer.create().toJSON();
75 | expect(tree).toHaveStyleRule("justify-content", "end");
76 | });
77 | });
78 |
--------------------------------------------------------------------------------
/website/components/sections/Alignment.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { stripIndent } from "common-tags";
3 | import Cell from "../DemoCell";
4 | import Grid from "../DemoGrid";
5 | import { Grid as _Grid, Cell as _Cell } from "../../../";
6 | import Example from "../Example";
7 | import Heading from "../Heading";
8 | import MdnLink from "../MdnLink";
9 |
10 | const alignments = [
11 | "start",
12 | "end",
13 | "center",
14 | "stretch",
15 | "space-around",
16 | "space-between",
17 | "space-evenly"
18 | ];
19 |
20 | const HorizontalAlignment = () =>
21 | <_Grid columns="repeat(auto-fit, minmax(200px, 1fr))">
22 | {alignments.filter(x => x !== "stretch").map(alignment =>
23 | <_Cell
24 | style={{ display: "flex", flexDirection: "column" }}
25 | key={alignment}
26 | >
27 |
28 | {alignment}
29 |
30 |
31 | A |
32 | B |
33 | C |
34 |
35 |
36 | )}
37 | ;
38 |
39 | const horizontalCode = stripIndent`
40 |
43 | A |
44 | B |
45 | C |
46 |
47 | `;
48 |
49 | const VerticalAlignment = () =>
50 | <_Grid columns="repeat(auto-fit, minmax(130px, 1fr))" minRowHeight="150px">
51 | {alignments.map(alignment =>
52 | <_Cell
53 | key={alignment}
54 | style={{ display: "flex", flexDirection: "column" }}
55 | >
56 |
57 | {alignment}
58 |
59 |
60 | A |
61 | B |
62 | C |
63 |
64 |
65 | )}
66 | ;
67 |
68 | const verticalCode = stripIndent`
69 |
72 | A |
73 | B |
74 | C |
75 |
76 | `;
77 |
78 | const AlignmentSection = () =>
79 |
80 | Alignment
81 |
82 | Horizontal alignment of columns can be modified using the{" "}
83 | justifyContent (justify-content CSS
84 | property).
85 |
86 |
89 |
90 | {horizontalCode}
91 |
92 |
93 | }
94 | output={}
95 | />
96 |
97 | Vertical alignment of rows can be modified using the{" "}
98 | alignContent (align-content CSS property).
99 |
100 |
103 |
104 | {verticalCode}
105 |
106 |
107 | }
108 | output={}
109 | path={"website/components/sections/Alignment.js"}
110 | />
111 | ;
112 |
113 | export default AlignmentSection;
114 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # `styled-css-grid 🍱`
2 |
3 | [](https://travis-ci.org/azz/styled-css-grid)
4 | [](https://github.com/prettier/prettier)
5 | [](https://npmjs.org/styled-css-grid)
6 | [](https://github.com/semantic-release/semantic-release)
7 | [](LICENSE)
8 | [](http://js.org)
9 |
10 | > A tiny (~2kb) [CSS grid] layout for React, built with [styled-components] 💅.
11 |
12 | ## examples
13 |
14 | See the **[website]**.
15 |
16 | ## installation
17 |
18 | Install React and [styled-components], then:
19 |
20 | ```bash
21 | $ yarn add styled-css-grid
22 | ```
23 |
24 | ## usage
25 |
26 | ```jsx
27 | import React from "react";
28 | import { Grid, Cell } from "styled-css-grid";
29 |
30 | const MyGrid = () => (
31 |
32 | foo |
33 | bar |
34 | baz |
35 |
36 | );
37 | ```
38 |
39 | ## api
40 |
41 | ### `Grid`
42 |
43 | Wrap your cells in `Grid`. Pretty simple.
44 |
45 | Props:
46 |
47 | * `columns`: The [grid-template-columns] CSS property. When a number is passed
48 | it is a shorthand to specify the number of columns. Default is `12`.
49 | * `gap`: The [grid-gap] CSS property. Default is `"8px"`.
50 | * `columnGap`: The [column-gap] CSS property. Not provided by default.
51 | * `rowGap`: The [row-gap] CSS property. Not provided by default.
52 | * `minRowHeight`: Minimum height of each row. Default is `"20px"`.
53 | * `height`: The [height] CSS property. Default is `"auto"`.
54 | * `flow`: The [grid-auto-flow] CSS property. Default is `"row"`.
55 | * `rows`: The [grid-template-rows] CSS property. When a number is passed
56 | it is a shorthand to specify the number of rows. Not provided by default.
57 | * `areas`: The [grid-template-areas] CSS property. Pass an array of strings, e.g. `["a a", "b c"]`. Not provided by default.
58 | * `justifyContent`: The [justify-content] CSS property. Not provided by default.
59 | * `alignContent`: The [align-content] CSS property. Not provided by default.
60 |
61 | ### `Cell`
62 |
63 | A cell. Not too much to say...
64 |
65 | Props:
66 |
67 | * `width`: Cell width in units, default is `1`.
68 | * `height`: Cell height in units, default is `1`.
69 | * `left`: The [grid-column-start] CSS property. Not provided by default.
70 | * `top`: The [grid-row-start] CSS property. Not provided by default.
71 | * `middle`: Vertically align the contents of the cell. Default is `false`.
72 | * `center`: Horizontally align the text contents of the cell. Default is `false`.
73 | * `area`: The [grid-area] CSS property. Not provided by default.
74 |
75 | ## browser support
76 |
77 | _[caniuse]_
78 |
79 | You can use CSS grid in production _today_ **if** you don't need to support IE and Edge, or you're building tooling or internal sites where you only need to support one browser.
80 |
81 | You can use CSS grid _soon_ if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec.
82 |
83 | 
84 |
85 | [website]: https://styled-css-grid.js.org/
86 | [CSS grid]: https://mdn.io/CSS_Grid_Layout
87 | [styled-components]: https://github.com/styled-components/styled-components
88 | [grid-auto-flow]: https://mdn.io/grid-auto-flow
89 | [grid-row-start]: https://mdn.io/grid-row-start
90 | [grid-column-start]: https://mdn.io/grid-column-start
91 | [grid-template-columns]: https://mdn.io/grid-template-columns
92 | [grid-template-rows]: https://mdn.io/grid-template-rows
93 | [grid-template-areas]: https://mdn.io/grid-template-areas
94 | [grid-area]: https://mdn.io/grid-area
95 | [height]: https://mdn.io/css-height
96 | [grid-gap]: https://mdn.io/grid-gap
97 | [column-gap]: https://mdn.io/column-gap
98 | [row-gap]: https://mdn.io/row-gap
99 | [justify-content]: https://mdn.io/justify-content
100 | [align-content]: https://mdn.io/align-content
101 | [caniuse]: http://caniuse.com/#feat=css-grid
102 |
--------------------------------------------------------------------------------