react-easy-css-grid-layout

1.0.11 • Public • Published

React CSS Grid layout component

A layout component rendering a Grid container with customizable number of columns, their width and gap between columns/rows.

Installation

Run npm i react-easy-css-grid-layout or yarn add react-easy-css-grid-layout in the root of your React project

Usage

In the component import Grid with

import Grid from 'react-easy-css-grid-layout'

Wrap around the children elements to render them in a grid:

    <Grid columns={"2"} gap={'1em'}>
		<p>1. Will go to the first column</p>
		<p>2. Will go to the second column</p>
		<p>3. Will go to the first column</p>
		<p>4. Will go to the second column and so on...</p>
    </Grid>

It will render those children paragraphs in the Grid with 2 columns:

Or looping and rendering children will also work:

    <Grid columns={"2"} gap={'1em'}>
    {renderAll.all(products)}
    </Grid>

The wrapper div will have class name grid which you can target from your custom CSS to add any styles.

Props

There are two props accepted: columns and gap

columns accepted values:

  • a number -- in this case it will be the number of columns with the same width, example:
<Grid columns={"2"} gap={'1em'}>
// will create 2 equally sized columns
<Grid columns={"5"} gap={'1em'}>
will create 5 equally sized columns
  • several length units accepted in CSS -- in this case it will be width of corresponding columns, example:
<Grid columns={"1fr 50% 200px"} gap={'1em'}>
// will create 3 columns with width 1fr for the first columns, 50% for the second column and 200px for the third column

gap accepted values:

Any length unit which will be used as a gap between columns and rows of your grid.


Done at Barcelona Code School

/react-easy-css-grid-layout/

    Package Sidebar

    Install

    npm i react-easy-css-grid-layout

    Weekly Downloads

    2

    Version

    1.0.11

    License

    ISC

    Unpacked Size

    4.54 kB

    Total Files

    5

    Last publish

    Collaborators

    • gk3000