React Styled Grid Layout

 

Lightweight and very simple CSS Grid Layout library based on Styled Components for React, Gatsby and others.

Installation

npm i react-styled-grid-layout

Usage

import { Grid, Row, Col, Cell } from 'react-styled-grid-layout';

Examples

Correct order, everything must be wrapped in <Grid> tag.

<Grid>
    <Col>...</Col>
</Grid>

<Grid>
   <Row>
      <Cell>...</Cell>
   </Row>
</Grid>

Simple two columns in one row:

<Grid cols="2">
    <Col>...</Col>
    <Col>...</Col>
    <Col>...</Col>
    <Col>...</Col>
</Grid>

Simple four columns grid with media queries and gaps:

<Grid cols="12" gap="10px">
    <Col xxl="3" md="6" sm="12">...</Col>
    <Col xxl="3" md="6" sm="12">...</Col>
    <Col xxl="3" md="6" sm="12">...</Col>
    <Col xxl="3" md="6" sm="12">...</Col>
</Grid>

You can easily position content within the <Row> container using align and justify props:

<Grid cols="12" gap="10px">
    <Row height="400px">
        <Cell align="center" justify="center"> Center </Cell>
        <Cell align="center"> Left Center </Cell>
        <Cell align="end" index="2"> Left Bottom </Cell>
    </Row>
</Grid>

React function component example:

import React from 'react';
import { Grid, Row, Col, Cell } from 'react-styled-grid-layout';

const Grids = () => {
  return (
    <>
      <Grid cols="4">
        <Col> 1 </Col>
        <Col> 2 </Col>
        <Col> 3 </Col>
        <Col> 4 </Col>
      </Grid>

      <Grid>
        <Row>
          <Cell> 1 </Cell>
          <Cell> 2 </Cell>
        </Row>
      </Grid>
    </>
  );
};

export default Grids;

All props

<Grid>...</Grid>

Props	CSS	Default	Test
rows :number	grid-template-rows	auto	<Grid rows="1fr auto 100px ...">
cols	grid-template-columns	repeat(12, 1fr)	<Grid cols="12">
gap	grid-gap	0	<Grid gap="25px">

<Col>...</Col>

Props	Breakpoints	Test
xxl :number	5120px	<Col xxl="3">
xl	1200px	<Col xl="6">
lg	992px	<Col lg="3">
md	768px	<Col md="12">
sm	576px	<Col sm="12">
xs	320px	<Col xs="12">

\

Props	CSS	Default	Test
row :number	grid-row	auto	<Col row="1">
span	grid-column-end	1	<Col span="2">
from to	grid-column: [from] / [to]	none	<Col from="1" to="12">
width	max-width	none	<Col width="50%">
height	min-height	auto	<Col height="500px">
align	align-self: [start, center, end]	start	<Col align="center">
justify	justify-self: [start, center, end]	start	<Col justify="center">
text	text-align: [left, center, right]	left	<Col text="center">

<Row>...</Row>

Props	CSS	Default	Test
height	min-height	auto	<Row height="50px">

<Cell>...</Cell>

Props	CSS	Default	Test
align	align-self: [start, center, end]	start	<Cell align="center">
justify	justify-self: [start, center, end]	start	<Cell justify="center">
index	z-index: [num]	1	<Cell index="1">
width	max-width	auto	<Cell width="100px">

Github repository

https://github.com/koniecznytomek/react-styled-grid-layout

git clone https://github.com/koniecznytomek/react-styled-grid-layout

Live demo

https://react-styled-grid-layout.netlify.app/

Case study