react-grid-easy

A React grid layout system using css grid developed by oscmedgon to be used on React projects, it's easy to implement. You can see and test the library at the demo

Dependencies

The only real dependency it's a a React version 16.2 or newer.

The grid structure helps developing a responsive site without tons of css.

The package doesn't use bootstrap, uses sass and css grid to create a really simple but effective grid.

Installation

$ npm i react-grid-easy

Component API

Container

The Container component is the root for a new grid it has three main props

Prop	value type	Description
fluid	Boolean	Converts all the dependant grids in fluid*
className	string	A className for the container
children	React node	Content to be rendered inside the container

• Only affects to direct child grids.

Grid

The Grid component is where the grid system starts to work, important advice, any component direct child of a grid that it's not a Col component will use all the columns, for example, if you put a <h3> tag and a <p> both of them will take all the space, the grid onlu affects to the Col component.

Prop	value type	Description	Default value
className	string	A className for the container	''
children	React node	Content to be rendered inside the container	undefined
revertMargin	Boolean	When true revers the margin assigned by the container	false
gap	Number1	Determines the gap between columns and rows	21
divisions	Number/string	Number of divisions, by default 12 divisions in columns	12
vertical	React node	Determine if the layout is horizontal or vertical	false

¹ Gap accepts different type of data:

1. Number: When you pass a number both column and vertical gaps are set to this value.
2. When you pass a number as a string like <Grid gap='20' /> this number is parsed and managed as a number.
3. If you are running version 2.0.0 beta or above you will be able to assign a different gap for the column gap and for the row gap pasing an object with the following structure {row: 20, column: '50'} you can mix strings and numbers if you wish for the values

Col

The Col component is a element inside the grid, with a series of props you can configure the size in the different screen sizes.

Prop	value type	Description
className	string	A className for the column
children	String	Content to be rendered inside the column
xs	String	Size on a mobile screen up to 767px width
sm	String	Size on a tablet screen up to 1023px width
md	String	Size on a medium screen up to 1365px width
lg	String	Size on a big screen
xsOffset	String	Empty space size before the column on mobile screen
smOffset	String	Empty space size before the column on tablet screen
mdOffset	String	Empty space size before the column on medium screen
lgOffset	String	Empty space size before the column on large screen

IMPORTANT note If you pass 0 in a screen size the column will not show in that screen size. If you dont pass any value to a specific screen size the component will try to take the previous screen size value, and if there isn't any assigned value it will take the higest possible value, in a 12 columns gid will take 12 columns. For example

<Grid>
    <Col sm='6' lg='3'>
        /* Your code here*/
    </Col>
    <Col>
        /* Your code here*/
    </Col>
    <Col xs='0' md='6' lg='3'>
        /* Your code here*/
    </Col>
</Grid>

This code is the same as using this

<Grid>
    <Col xs='12' sm='6' md='6' lg='3'>
        /* Your code here*/
    </Col>
    <Col xs='12' sm='12' md='12' lg='12'>
        /* Your code here*/
    </Col>
    <Col xs='0' sm='0' md='6' lg='3'>
        /* Your code here*/
    </Col>
</Grid>

Row

The Row its a component to create subgrids inside an element, no matter the nesting position of the component.

Prop	value type	Description
revertMargin	Boolean	Revert the default margins of the grid
className	string	A className for the container
children	React node	Content to be rendered inside the container

Usage

    import React from 'React'
    import {Component, Grid, Col, Row} from 'react-lightweight-grid';
    const gridTest = () => (
        <Component>
            <Grid gap={{column: 20, row: 15}}>
                <h1>Nested components</h1>
                <p>Any nested component without a col component with size propierties fits all the grid</p>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    First element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Second element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Third element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Fourth element
                </Col>
                <Row>
                    <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    First element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Second element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Third element
                </Col>
                <Col xs='11' sm='6' md='4' lg='3' xsOffset='1' smOffset='3' mdOffset='4' lgOffset='1'>
                    Fourth element
                </Col>
                </Row>
            </Grid>
        </Component>
    )

Support

This component it's planned to implement more features, stay tunned.