LESS CSS Layout module for fluid and responsive, but irregular grid. Suitable for non-layout grids such as thumbnails. Based on Block Grid component from Foundation framework.

less, css, grid, foundation, layout, responsive
bower install freestyle-grid



Common grids like the Bootstrap's one are great for common layout. But sometimes your page or UI component needs irregular layout – for example 3, 5 or 11 columns grid. Then you need irregular grid. FreestyleGrid.

FreestyleGrid is a tiny LESS layout module for fluid and responsive – but irregular – grid. Suitable for non-layout grids such as thumbnails. Great for fast prototyping. Based on idea behind Block Grid from Foundation framework.

Table of contents


bower install freestyle-grid

Of course, you can use compiled CSS files only.

Examples & demos

1st example: 1/3 layout everywhere

<ul class="fgrid fgrid-3">
  <li class="fgrid-item">Lorem Ipsum…</li>

Simple demo

Try it in your browser.

Have you noticed that you don't need to write markup for layout row? Yes, writing layout markup with FreestyleGrid is really fast.

2nd example: 1/3 layout on small & 1/6 on large displays

<div class="fgrid fgrid-small-3 fgrid-large-6">
  <p class="fgrid-item">Lorem Ipsum…</p>

Note: ul/li markup is not required.

Small/Large demo

Try it in your browser.

3rd example: 1/2 layout on small & 1/5 on large displays with thumbnails

<ul class="fgrid fgrid-small-2 fgrid-large-5">
  <li class="fgrid-item"><img …></li>

Thumbnails demo

Try it in your browser.


You are welcome to change FreestyleGrid behavior with LESS variables:

  • Generate your own classes with @include-html-classes set to false and our mixins.
  • Change grid parameters with @gutter-width and @max-columns.
  • Move breakpoints up or down by changing values of @small-grid-start and @large-grid-start.

FreestyleGrid and Bootstrap

FreestyleGrid cooperation with Bootstrap you can easily try in this demo or source file. FreestyleGrid has LESS mixin, to help generate breakpoints and layout for any grid system, not only the Bootstrap one.

IE8 support

IE8- doesn't support Media Queries so you need to use Respond.js polyfill.

And if your grid items (.fgrid-item) are of unequal height, then you have to add <div class="clearfix"> when starting new layout row. This is because IE8 and lower versions lacks :nth-of-type support.

So the IE8 simplified markup looks like this:

  <!--[if lt IE 9]>
    <script src=""></script>
      img { width: auto } /* */
  <ul class="fgrid fgrid-small-2 fgrid-large-5">
    <li class="fgrid-item"><img …></li>
    <!--[if lt IE 9]><div class="clearfix"></div><![endif]-->

Try it in your browser.

Author and licence

Made in Prague by Martin Michalek (

MIT licence.