📋 @folo/layout

React CSS Grid Components

Installation

npm install @folo/layout

Usage

import { Grid, GridItem } from "@folo/layout";

const MyGrid = () => (
  <Grid>
    <GridItem col={4} row={1}>
      item
    </GridItem>
    <GridItem col={3} row={2}>
      item
    </GridItem>
    <GridItem col={2} row={3}>
      item
    </GridItem>
    <GridItem col={1} row={5}>
      item
    </GridItem>
    <GridItem col={4} row={10}>
      item
    </GridItem>
  </Grid>
);

Components

import { Grid, GridItem } from "@folo/layout";

Components Props

All components accept custom props.

Grid

property	type	description	default
component	node/function	custom render-component	div
col	number	number of columns in grid
colWidth	string	fixed column width
colMinWidth	string	column minimum width	auto
colMaxWidth	string	column maximum width	1fr
row	number	number of rows in grid
rowWidth	string	fixed row width
rowMinWidth	string	row minimum width	auto
rowMaxWidth	string	row maximum width	1fr

GridItem

Used for implicit grid layout.

property	type	description	default
component	node/function	custom render-component	div
row	number	number of columns in grid
toRow	number	column width
col	number	column minimum width	0
toCol	number	column maximum width
isCenter	Boolean	number of rows in grid	false
isHorizontal	Boolean		true

Contribution 😇

If you have ideas to improve this package or issues don't hesitate. You are always welcome.

License

This project is licensed under the MIT License