See the website.
Install React and styled-components, then:
$ yarn add styled-css-grid
import React from "react";import Grid Cell from "styled-css-grid";const MyGrid =<Grid = ="2px"><Cell>foo</Cell><Cell =>bar</Cell><Cell =>baz</Cell></Grid>;
A cell. Not too much to say...
width: Cell width in units, default is
height: Cell height in units, default is
left: The grid-column-start CSS property. Not provided by default.
top: The grid-row-start CSS property. Not provided by default.
middle: Vertically align the contents of the cell. Default is
center: Horizontally align the text contents of the cell. Default is
area: The grid-area CSS property. Not provided by default.
Wrap your cells in
Grid. Pretty simple.
columns: The grid-template-columns CSS property. When a number is passed it is a shorthand to specify the number of columns. Default is
gap: Gap between cells. Default is
minRowHeight: Minimum height of each row. Default is
flow: The grid-auto-flow CSS property. Default is
rows: The grid-template-rows CSS property. Not provided by default.
areas: The grid-template-areas CSS property. Pass an array of strings, e.g.
["a a", "b c"]. Not provided by default.
justifyContent: The justify-content CSS property. Not provided by default.
alignContent: The align-content CSS property. Not provided by default.
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.
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.