Why Grid column generator with loops in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple loop can save you hours of tedious CSS work!

The Scenario

Imagine you are building a website layout with many columns. You write CSS rules for each column width by hand, like .col-1 { width: 8.33%; }, .col-2 { width: 16.66%; }, and so on.

The Problem

If you want to change the number of columns or add new ones, you must update every rule manually. This is slow, boring, and easy to make mistakes. Your code becomes long and hard to maintain.

The Solution

Using a grid column generator with loops in Sass, you write one loop that creates all column widths automatically. This saves time, reduces errors, and keeps your code clean and flexible.

Before vs After

✗ Before

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }

✓ After

@for $i from 1 through 12 {
  .col-#{$i} {
    width: (100% / 12) * $i;
  }
}

What It Enables

You can quickly create responsive grid layouts with any number of columns, just by changing one number.

Real Life Example

When building a blog page, you can easily switch from a 3-column layout to a 4-column layout without rewriting CSS for each column size.

Key Takeaways

Writing column widths manually is slow and error-prone.

Loops in Sass automate generating grid columns.

This makes layouts flexible and easy to update.