This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
reflex-grid with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
A lightweight responsive flexbox grid with cross browser support, an inline-block fallback and no polyfills
Reflex gives you the ability to take advantage of flexbox for laying out a grid while having a reliable inline-block fallback for older browsers.
At the time of writing, browser support for flexbox is at 96.63% so I propose that it's time to start taking advantage of flexbox and accept that the inline-block fallback won't support everything.
Where flexbox isn't supported, your basic grid structure will remain intact and most of the layout classes still work. Try the examples page out in a browser that does not support flexbox (such as Internet Explorer 9) to see for yourself!
You could clone this repo which would allow you to modify the variables and build your own version of this grid. You can modify things like the number of columns or the breakpoints.
If you're familiar with npm you can use
npm install reflex-grid to have a look around, or add it as a dependency to your node project.
This is version 2 of reflex grid and is not compatible with version 1. Many things have changed in version 2 which will need addressing if you want to update. I wrote a blog post about version 2 changes if you're interested in learning more
grid--prefixes but are otherwise unchanged