Repository files navigation

A tiny (~2kb)CSS grid layout for React, built withstyled-components 💅.

See thewebsite.

Install React andstyled-components, then:

$ yarn add styled-css-grid

importReactfrom"react";import{Grid,Cell}from"styled-css-grid";constMyGrid=()=>(<Gridcolumns={2}gap="2px"><Cell>foo</Cell><Cellheight={2}>bar</Cell><Cellwidth={2}>baz</Cell></Grid>);

Wrap your cells inGrid. Pretty simple.

Props:

• columns: Thegrid-template-columns CSS property. When a number is passedit is a shorthand to specify the number of columns. Default is12.
• gap: Thegrid-gap CSS property. Default is"8px".
• columnGap: Thecolumn-gap CSS property. Not provided by default.
• rowGap: Therow-gap CSS property. Not provided by default.
• minRowHeight: Minimum height of each row. Default is"20px".
• height: Theheight CSS property. Default is"auto".
• flow: Thegrid-auto-flow CSS property. Default is"row".
• rows: Thegrid-template-rows CSS property. When a number is passedit is a shorthand to specify the number of rows. Not provided by default.
• areas: Thegrid-template-areas CSS property. Pass an array of strings, e.g.["a a", "b c"]. Not provided by default.
• justifyContent: Thejustify-content CSS property. Not provided by default.
• alignContent: Thealign-content CSS property. Not provided by default.

A cell. Not too much to say...

Props:

• width: Cell width in units, default is1.
• height: Cell height in units, default is1.
• left: Thegrid-column-start CSS property. Not provided by default.
• top: Thegrid-row-start CSS property. Not provided by default.
• middle: Vertically align the contents of the cell. Default isfalse.
• center: Horizontally align the text contents of the cell. Default isfalse.
• area: Thegrid-area CSS property. Not provided by default.

caniuse

You can use CSS grid in productiontodayif 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.

You can use CSS gridsoon if you have to support the latest version of modern browsers. Edge 16 will implement the latest CSS grid spec.