grid

> BEMish grid component

Install

``console
$ npm install cssrecipes-grid
`

Default grid implementation is using inline-block+font-size 0 method:

`css
@import "./node_modules/cssrecipes-grid/index.css";
`

If you want, an alternative grid based on flexbox is available in cssrecipes-grid/flex.

`css
@import "./node_modules/cssrecipes-grid/flex.css";
`

Both rely on same classes, so generic documentation below should works both implementations"

_Advice: you can use size utilities from cssrecipes-utils for convenience.
It includes .r-(all|min|max)* classes used in the examples below to define grid cells width._

$3

`console
$ npm install cssrecipes-utils cssrecipes-grid
`

`css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
/ all, max (desktop first), min (mobile first) /
@import "./node_modules/cssrecipes-utils/index.css";

/*
Refer to cssrecipes-utils install doc to know more.
https://github.com/cssrecipes/utils#install

Or check examples below.
*/
`

Usage

First of all, you can override all these custom properties according to your needs (here are default values):

`css
:root {
--r-Grid-baseFontSize: 1rem;
--r-Grid-gutter: 1rem; / used for .r-Grid--withGutter /
}
`

$3

#### Include deps

`css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/min.css";
`

#### Define your Grid size

`css
.r-Grid {
width: auto;
}

@media (--r-minM) {
.r-Grid {
width: 30rem;
}
}

@media (--r-minL) {
.r-Grid {
width: 50rem;
}
}

/* and the rest of it /
`

#### Use your grid

`html


`css
@import "./node_modules/cssrecipes-custom-media-queries/index.css";
@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
@import "./node_modules/cssrecipes-utils/lib/max.css";
`

#### Define your Grid size

`css
.r-Grid {
width: auto;
}

@media (--r-maxL) {
.r-Grid {
width: 50rem;
}
}

@media (--r-maxM) {
.r-Grid {
width: 30rem;
}
}

/* and the rest of it /
`

#### Use your grid

`html


`css
@import "./node_modules/cssrecipes-grid/index.css";
@import "./node_modules/cssrecipes-utils/lib/all.css";
`

#### Define your Grid size

`css
.r-Grid {
width: 50rem;
}
`

#### Use your grid

`html


`console
$ npm run build
`

To generate the testing build.

`console
$ npm run build-test
`

Basic visual tests are in test/index.html.

Contributing

Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.

`console
$ git clone https://github.com/cssrecipes/grid.git
$ git checkout -b patch-1
$ npm install
$ npm test
``

Changelog

License

---

Acknowledgements

This grid module has been inspired by SUIT CSS components-grid & SUIT CSS utilities: size