Build a Responsive Grid System in LESS with Recursive Mixins

• 1 minute READ

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

No-Code Email Template Builder

With Postcards Email Builder you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Free Email BuilderFree Email Templates
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.

Posts by David East