# smart-grid > Smart CSS Grid with different preprocessors: LESS, SCSS, SASS or Stylus Latest version **2.3.2** (published 2025-07-21) · MIT license · 0 weekly downloads ## Install ```sh npm install smart-grid pnpm add smart-grid yarn add smart-grid bun add smart-grid ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 2.3.2 | | Published | 2025-07-21 | | First published | 2016-10-30 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 41.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 444 | | Author | Dmitry Lavrik | | Maintainers | dmitrylavrik | | Keywords | css, less, scss, sass, stylus | ## Links - npm: https://www.npmjs.com/package/smart-grid - Repository: https://github.com/dmitry-lavrik/smart-grid - Homepage: https://github.com/dmitry-lavrik/smart-grid#readme - Issues: https://github.com/dmitry-lavrik/smart-grid/issues - npm.io page: https://npm.io/package/smart-grid ## Alternatives - [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads - [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads - [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads - [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads - [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads ## Recent versions - 2.3.2 (latest) — 2025-07-21 - 2.3.1 — 2025-06-20 - 2.2.3 — 2025-06-20 - 2.2.2 — 2025-06-20 - 2.1.2 — 2018-08-16 - 2.1.1 — 2018-06-03 - 2.0.1 — 2017-11-14 - 2.0.0 — 2017-09-29 - 1.1.0 — 2017-06-02 - 1.0.5 — 2017-04-09 - 1.0.4 — 2017-04-05 - 1.0.3 — 2017-03-24 - 1.0.2 — 2017-03-24 - 1.0.1 — 2017-03-21 - 1.0.0 — 2017-01-08 - … 24 more at https://npm.io/package/smart-grid/versions ## README > Create adaptive CSS? It's fast and easy! With smart-grid! ## Install ``` $ npm i smart-grid --save-dev ``` * Create a file with the following config. Tweak it where needed. ```js // ES-modules import smartgrid from 'smart-grid'; /* // For CommonJs import('smart-grid').then(({ default: smartgrid }) => { }); */ /* It's principal settings in smart grid project */ var settings = { outputStyle: 'less', /* less || scss || sass || styl */ columns: 12, /* number of grid columns */ offset: '30px', /* gutter width px || % || rem */ mobileFirst: false, /* mobileFirst ? 'min-width' : 'max-width' */ container: { maxWidth: '1200px', /* max-width оn very large screen */ fields: '30px' /* side fields */ }, breakPoints: { lg: { width: '1100px', /* -> @media (max-width: 1100px) */ }, md: { width: '960px' }, sm: { width: '780px', fields: '15px' /* set fields only if you want to change container.fields */ }, xs: { width: '560px' } /* We can create any quantity of break points. some_name: { width: 'Npx', fields: 'N(px|%|rem)', offset: 'N(px|%|rem)' } */ } }; smartgrid('./path-to-your-folder', settings); ``` * Run this file with node ``` node smart-grid-config.js ``` * You can also implement this code in Gulp tasks, Grunt e t.c. ## Why? How does it work? We set JS array with settings and get LESS, SCSS, SASS or Stylus file with Smart Grid. ### And what? Standard bootstrap grid forces us to write a lot of classes in html and spoils the structure of the code. In the proposed version, we won't touch classes in the html code at all. Instead we'll only add mixins to the existing selectors. ### Usage examples LESS ```less .items{ .row-flex(); .md(justify-content, center); .item{ .col(); .size(3); .size-md(5); .size-xs(10); } } ``` OR SCSS ```scss .items{ @include row-flex(); @include md(justify-content, center); .item{ @include col(); @include size(3); @include size-md(5); @include size-xs(10); } } ``` OR SASS ```sass .items +row-flex() +md(justify-content, center) .item +col() +size(3) +size-md(5) +size-xs(10) ``` OR Stylus ```stylus .items row-flex() md(justify-content, center) .item col() size(3) size-md(5) size-xs(10) ``` ### Result is large CSS ```css .items { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } @media screen and (max-width: 992px) { .items { justify-content: center; } } .items .item { box-sizing: border-box; margin-left: 15px; margin-right: 15px; word-wrap: break-word; width: calc(100% / 12 * 3 - 30px); } @media screen and (max-width: 992px) { .items .item { width: calc(100% / 12 * 5 - 30px); } } @media screen and (max-width: 576px) { .items .item { width: calc(100% / 12 * 10 - 30px); } } ``` Mostly nice! But too many media queries. ### After using group-css-media-queries media queries are neatly grouped, same as you would do manually ```css .items { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .items .item { box-sizing: border-box; margin-left: 15px; margin-right: 15px; word-wrap: break-word; width: calc(100% / 12 * 3 - 30px); } @media screen and (max-width: 992px) { .items { justify-content: center; } .items .item { width: calc(100% / 12 * 5 - 30px); } } @media screen and (max-width: 576px) { .items .item { width: calc(100% / 12 * 10 - 30px); } } ``` ### So, ideal CSS scheme 1. Smart Grid generates mixins for LESS, SCSS, SASS or Stylus 2. You use mixins to write code quickly 3. And finaly, we compile the result through: - group-css-media-queries - autoprefixer - clean-css ### Vite demo for all preprocessors [https://github.com/dmitry-lavrik/smartgrid-test](https://github.com/dmitry-lavrik/smartgrid-test) --- _Source: https://npm.io/package/smart-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._