Tiny Flexbox-based grid system

Back to Posts

Tiny Flexbox-based grid system

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: flex declaration, degrading to a single column layout. No harm done.
  • This line determines how items are handled. The wrap value 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 (5em in 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 5em value and leave 1 0 as it is.
  • This is for gutters. A 0.5em margin 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-grid container remains flush horizontally and no additional margin is added to the vertical flow.
  • The class="fukol" container in the HTML snippet enables you to add positive margins around the grid — not possible with just .fukol-grid because this uses negative margins (see 5). It also suppresses horizontal scrolling issues which occur under certain circumstances.

 

Back to Posts