📋 @folo/layout

> React CSS Grid Components

!live example



Installation

``sh
npm install @folo/layout
`

Usage

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

const MyGrid = () => (


item


item


item


item


item


);
`

$3

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

$3

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