Skip to content

oscmedgon/react-grid-easy

Repository files navigation

npm

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

1 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.