Why Grid system mixin from scratch in SASS? - Purpose & Use Cases

The Big Idea

Discover how a simple mixin can save you hours of frustrating CSS tweaks!

The Scenario

Imagine you are building a website layout by placing boxes side by side using only fixed widths and margins.

You write CSS for each box manually, adjusting widths and spaces every time you add or remove a box.

The Problem

This manual method is slow and frustrating because every change means recalculating widths and margins.

If you want to add a new column or change spacing, you must rewrite many lines of CSS, risking mistakes and inconsistent layouts.

The Solution

A grid system mixin lets you write one reusable piece of code that automatically calculates widths and spacing for columns.

You just tell it how many columns you want and it handles the math, making your layout flexible and easy to update.

Before vs After

✗ Before

.box1 { width: 30%; margin-right: 5%; }
.box2 { width: 30%; margin-right: 5%; }
.box3 { width: 30%; }

✓ After

@mixin grid($columns) { width: calc((100% - (#{($columns - 1)} * 1rem)) / #{$columns}); margin-right: 1rem; &:last-child { margin-right: 0; } }
.box { @include grid(3); }

What It Enables

It enables you to create responsive, consistent layouts quickly without rewriting CSS for every change.

Real Life Example

Think of a photo gallery where you want 3, 4, or 5 images per row depending on screen size; a grid mixin makes adjusting this effortless.

Key Takeaways

Manual layout sizing is slow and error-prone.

Grid mixins automate column width and spacing calculations.

This makes layouts flexible, consistent, and easy to maintain.