1.0.9 • 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.


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


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>

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'}>


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


npm i react-easy-css-grid-layout

DownloadsWeekly Downloads






Unpacked Size

4.39 kB

Total Files


Last publish


  • gk3000