# grid > BEMish grid component ## Install ```console $ npm install cssrecipes-grid ``` ```css @import "./node_modules/cssrecipes-grid/index.css"; ``` _Advice: you can use size utilities from [`cssrecipes-utils`](http://github.com/cssrecipes/utils) for convenience. It includes `.r-(all|min|max)*` classes used in the examples below to define grid cells width._ ### Recommanded install 👌 ```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-baseFontSizeFallback: 16px; --r-Grid-gutter: 1rem; /* used for .r-Grid--withGutter */ } ``` ### Mobile-first #### 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: 30em; } } @media (--r-minL) { .r-Grid { width: 50em; } } /** and the rest of it */ ``` #### Use your grid ```html
``` ### Desktop-first #### 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/max.css"; ``` #### Define your `Grid` size ```css .r-Grid { width: auto; } @media (--r-maxL) { .r-Grid { width: 50em; } } @media (--r-maxM) { .r-Grid { width: 30em; } } /** and the rest of it */ ``` #### Use your grid ```html
``` ### Without responsive #### Include deps ```css @import "./node_modules/cssrecipes-grid/index.css"; @import "./node_modules/cssrecipes-utils/lib/all.css"; ``` #### Define your `Grid` size ```css .r-Grid { width: 50em; } ``` #### Use your grid ```html
``` --- ## Testing To generate a build: ```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](CHANGELOG.md) ## [License](LICENSE)