1 minute

Build a Responsive Grid System in LESS with Recursive Mixins

4 Comments

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

David East

David East is a Developer Programs Engineer for Google, working on Firebase in San Francisco. He's a die-hard JavaScript fan and a budding iOS developer. He also likes waffles. If you like to write code—or eat waffles—follow him on twitter: @_davideast.

Posts by David East

Super-Intuitive Drag & Drop Template Generator

Create beautiful responsive emails and newsletters easily.

Learn more Try Free
Cookie Icon
We use cookies to ensure that we give you the best experience on our website.
  • I disagree
  • I agree