This impressively tiny Flexbox-based grid system is just 93 bytes minified! It degrades to a single column layout in places where Flexbox isn’t supported, and instead of using breakpoints it uses an element query technique so that items grow to fill the available space.
display: flexdeclaration, degrading to a single column layout. No harm done.
wrapvalue means items will start a new row if there’s not enough room on the current one.
5emin the example — the flex basis) and make sure items can grow to use the available space (
1) but not shrink (
0). So only change the
5emvalue and leave
1 0as it is.
0.5emmargin here means gutters of
1em(the margins double up).
.fukol-gridcontainer remains flush horizontally and no additional margin is added to the vertical flow.
class="fukol"container in the HTML snippet enables you to add positive margins around the grid — not possible with just
.fukol-gridbecause this uses negative margins (see 5). It also suppresses horizontal scrolling issues which occur under certain circumstances.