Make a CSS Grid framework with custom browser support at the snap of a function.
Table of Contents
HTML isn’t written one layer deep. A great grid framework should allow you to embed divs within divs, but still remember how many columns are available. Without subgrids, users of your grid framework are prone to accidently break out of your design spec.
Progressive Enhancement 📉
Different experiences have different browser requirements based on the users visiting. Your grid framework should also be performant with the smallest amount of code needed. With this project’s fine-tuned browser compatibility settings, you can support the right browser versions with as little grid code as possible.
- Wanna configure your grid framework and just copy and paste the CSS straight from this project’s website? Go ahead.
- Need to distribute your grid framework to multiple projects with a Node package? Add Grid Wiz as a dependency and compile it there.
- Are you bleeding-edge enough to compile the grid framework directly in your client-side code? Now we’re cooking!
This package lets you configure your grid’s browser compatibility. The trade-off is that with more backwards compatibility, the larger the size of the grid code will be. This configuration option is great for developers that have multiple products with differing browser requirements.
CSS Grid Level 2 is still a working draft. Once this support mode is added, it will significantly cut file size due to support for
Edge Issue 18676405 for more details.** This implementation is currently broken on Edge. See
npm install grid-wiz
;var yourGridCSS =;
To work on this project locally, just do
npm i once and then
npm run start to open up dev mode in browser at