Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    styled-css-gridpublic

    styled-css-grid 🍱

    Travis Prettier npm semantic-release License JS.ORG

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

    examples

    See the website.

    installation

    Install React and styled-components, then:

    $ yarn add styled-css-grid

    usage

    import React from "react";
    import { Grid, Cell } from "styled-css-grid";
     
    const MyGrid = () => (
      <Grid columns={2} gap="2px">
        <Cell>foo</Cell>
        <Cell height={2}>bar</Cell>
        <Cell width={2}>baz</Cell>
      </Grid>
    );

    api

    Cell

    A cell. Not too much to say...

    Props:

    • width: Cell width in units, default is 1.
    • height: Cell height in units, default is 1.
    • 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 false.
    • center: Horizontally align the text contents of the cell. Default is false.
    • area: The grid-area CSS property. Not provided by default.

    Grid

    Wrap your cells in Grid. Pretty simple.

    Props:

    • columns: The grid-template-columns CSS property. When a number is passed it is a shorthand to specify the number of columns. Default is 12.
    • gap: Gap between cells. Default is "8px".
    • minRowHeight: Minimum height of each row. Default is "20px".
    • flow: The grid-auto-flow CSS property. Default is "row".
    • 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.

    browser support

    caniuse

    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.

    Can I use?

    install

    npm i styled-css-grid

    Downloadslast 7 days

    346

    version

    0.8.2

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar