react-css-grider

The simple, declarative and small but powerful and expressive React Component to smell power of CSS Grid.

• CSS Grid

• canIuse

• SCENARIOS

Usage

Instal first:

$ npm i react-css-grider

$ yarn add react-css-grider

and import then

import { Grid, GridItem, PH } from 'react-css-grider'

Comunicate with by API

• Grid level

<Grid {/*grid API*/}>
    {/*some items*/}
</Grid>

• Grid item level

<Grid>
    <GridItem {/*grid API*/}>
        {/*item's =content*/}
    </GridItem>
</Grid>

• Placeholder (PH)

PH component is created to fill grid as visual marker only. You can use any HTML element or component instead PH.

<PH>placeholder</PH>

examples:

3 columns

<Grid columns={3}>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
</Grid>

3 columns and declared gap

<Grid columns={3} gap={'1px'}>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
</Grid>

asymethic gap

<Grid columns={3} gap={'5px 25px'}>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
    <PH>placeholder</PH>
</Grid>

bigger one

<Grid columns={3} alignContent={'start'}>
    <Grid columns={1} alignContent={'start'}>
        <PH>input</PH>
        <GridItem wrapped>
            <Grid columns={2} alignContent={'start'} gap={'.25rem'}>
                <PH>selector</PH>
                <PH>rel input</PH>
            </Grid>
        </GridItem>
    </Grid>
    <Grid columns={1} alignContent={'start'}>
        <Grid columns={1} alignContent={'start'}>
            <GridItem wrapped>
                <Grid columns={'2rem 1fr'} gap={0}>
                    <PH>ch</PH>
                    <PH>input</PH>
                </Grid>
            </GridItem>
            <GridItem wrapped>
                <Grid columns={'2rem 1fr'} gap={0}>
                    <PH>ch</PH>
                    <PH>input</PH>
                </Grid>
            </GridItem>
            <GridItem wrapped>
                <Grid columns={'2rem 1fr'} gap={0}>
                     <PH>ch</PH>
                     <PH>input</PH>
                </Grid>
            </GridItem>
        </Grid>
    </Grid>
    <PH>element</PH>
</Grid>

another bigger one

<Grid columns={"1fr 4rem 1fr"} gap={'2rem'} alignContent={'start'}>
    <Grid columns={1} rows={'1rem minmax(2rem, auto) 2rem'} alignContent={'start'}>
        <PH>subheader</PH>
        <Grid columns={1}>
            <PH>selected</PH>
            <PH>selected</PH>
        </Grid>
        <GridItem>
            <PH>Add firing</PH>
        </GridItem>
    </Grid>
    <PH>and</PH>
    <Grid columns={1} rows={'1rem minmax(2rem, auto) 2rem'} alignContent={'start'}>
        <PH>subheader</PH>
        <PH>No template selected</PH>
        <GridItem>
            <PH>Add blocking</PH>
        </GridItem>
    </Grid>
</Grid>

( have a fun 🤘 more examples and options soon 😋 )