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!
Simply include the library
<script src="flex-grid.js"></script>
And use your grid
<flex-grid>
<div>Col 1</div>
<div>Col 2</div>
<div>Col 3</div>
</flex-grid>
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.
For usage, please look at the demo
See demo.html or https://codepen.io/lekoalabe/pen/ExWowBM