Build a Responsive Grid System in LESS with Recursive Mixins


Ever wanted to build your own responsive grid system? It’s easier than you think. LESS has a feature known as recursive mixins, which can generate code that we’d otherwise have to type by hand. A recursive mixin acts as a loop, executing a snippet of CSS until a stopping point is reached.

In this video tutorial, we will cover the fundamentals of recursive mixins. We’ll start by building a simple example and then go into something a bit more complicated. There’s a bit of math involved here to create a responsive grid system, but again … it’s easier than you might imagine.

There’s even a GitHub repo to accompany the video!

Responsive Grid with Recursive Mixins

What you will learn in this tutorial: How to build a responsive grid system in LESS using recursive mixins, which keeps you from having to generate code that is typed by hand, and simplify your LESS code.

Video run time: 9 minutes


  1. Alejandro Sep 30, 1:08 pm

    Hey, Nice tutorial which text editor are you using? Looks really cool.

  2. Pedro Sombreireiro Sep 30, 2:08 pm

    Great tutorial :)

    With percentages, would the the same process correct?

    You should have more tuts and techniques using LESS. :)

  3. Francesco Albanese Jul 6, 11:52 am

    The mixins.less doesn’t compile for me, it failes all the time. I tried with CodeKit and with Brackets LESS auto-compile plug in. I tried also to rewrite the code and check for some typos but there isn’t any. The problem should be the .generate-columns() mixin. Could you help me please? Tell me if you need other details of my compiling attempt

Leave a Reply

* Minimum length: 20 characters