Home

Welcome to the react-css-grider wiki!

In my opinion the best model to learn CSS Grid is learning by scenarios. Scenarios can show us how CSS Grid works by real examples. Additionally we have special context - React's context.

Instal first:

$ npm i react-css-grider

$ yarn add react-css-grider

and import then

import { Grid, GridItem, PH } from 'react-css-grider'

---

Scenarios

Intro. I want to have 3 columns layout

<Grid columns={3}>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</Grid>

A default column gap is equal 1rem. Notice: CSS Grid doesn't have any gap between container and columns. Gap exists only between columns (and rows) - this is native implementation of CSS and nice to see, have and use it. You can to declare any count of columns columns={3} as above or columns={12}, columns={24} etc. Great!

I. I want to have 16 columns layout

<Grid columns={16}>
    {/* add element like div * 16 */}
</Grid>

II. I want to have 6 column layout in my first container and 5 columns layout inside second

<div>
    <Grid columns={4}>
        {/* add element like div * 4 */}
    </Grid>
</div>
<div>
    <Grid columns={3}>
        {/* add element like div * 3 */}
    </Grid>
</div>

This is awesome, you can to have asymmetric columns in your app. Even and odd, without extending of the css grids mixins - really awesome! You can to have as many columns as you need at the moment and context because CSS Grid supports native repeat(count, width) grid-remplate-columns CSS declaration.