A powerful flex based grid system
Bootstrap 5 grid weights about 51kb minified. flex-grid, on the other hand, weights 4kb of css + 2 kb of js and provide a similar feature set. Only 4kb of blocking css are between you are your dream layout!
How to use
Simply include the library
And use your grid
<flex-grid> <div>Col 1</div> <div>Col 2</div> <div>Col 3</div> </flex-grid>
Why a custom element ?
The custom element is just a convenience around setting the custom styles
It just makes the whole thing neat. Also, it allows targeting of elements based on their attributes in css.
<flex-grid md="3" lg="4"> <div>col 1 of md=3/lg=4</div> <div>col 2 of md=3/lg=4</div> <div>col 3 of md=3/lg=4</div> <div>col 4 of md=3/lg=4</div> </flex-grid>
Also, using attributes makes it very clear what is related to the layout when classes can mean various things.
Demo and more
For usage, please look at the demo
See demo.html or https://codepen.io/lekoalabe/pen/ExWowBM