Tiny Flexbox-based grid systemdesignxpider
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.
- Flexbox based grid system. Even Opera Mini supports Flexbox. Older user agents that don’t support Flexbox ignore the
display: flexdeclaration, degrading to a single column layout. No harm done.
- This line determines how items are handled. The
wrapvalue means items will start a new row if there’s not enough room on the current one.
- This is the ‘element query’ part. Instead of setting an arbitrary number of columns and using breakpoints, we decide roughly how wide we want the item to be (
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.
- This is for gutters. A
0.5emmargin here means gutters of
1em(the margins double up).
- This should always be a negative version of 4. It compensates for the margins created by the items. It makes sure the outside of the
.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.