Creating a Grid with SASS Math

Creating a Grid with SASS Math

Let's build a 12-column responsive grid system from scratch using SASS variables, math, and loops. This is how frameworks like Bootstrap create their grids!

The Grid Concept

// A 12-column grid divides the row into 12 equal parts:
// |--1--|--2--|--3--|--4--|--5--|--6--|--7--|--8--|--9--|--10-|--11-|--12-|

// .col-6  = 6/12 = 50% wide
// .col-4  = 4/12 = 33.33% wide
// .col-3  = 3/12 = 25% wide

Grid Variables

@use 'sass:math';

$grid-columns: 12;
$grid-gutter: 20px;
$container-max: 1200px;

Container and Row

.container {
    max-width: $container-max;
    margin: 0 auto;
    padding: 0 math.div($grid-gutter, 2);
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: math.div(-$grid-gutter, 2);
    margin-right: math.div(-$grid-gutter, 2);
}

Generating Columns with @for

// The magic — generate all 12 column classes with a loop!
@for $i from 1 through $grid-columns {
    .col-#{$i} {
        flex: 0 0 auto;
        width: math.div(100%, $grid-columns) * $i;
        padding-left: math.div($grid-gutter, 2);
        padding-right: math.div($grid-gutter, 2);
    }
}

/* Compiled CSS — all 12 classes generated automatically! */
.col-1  { width: 8.3333%; }
.col-2  { width: 16.6667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.3333%; }
.col-5  { width: 41.6667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.3333%; }
.col-8  { width: 66.6667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.3333%; }
.col-11 { width: 91.6667%; }
.col-12 { width: 100%; }

Responsive Columns

$breakpoints: (
    sm: 576px,
    md: 768px,
    lg: 1024px,
    xl: 1200px,
);

// Generate responsive column classes
@each $prefix, $breakpoint in $breakpoints {
    @media (min-width: $breakpoint) {
        @for $i from 1 through $grid-columns {
            .col-#{$prefix}-#{$i} {
                flex: 0 0 auto;
                width: math.div(100%, $grid-columns) * $i;
                padding-left: math.div($grid-gutter, 2);
                padding-right: math.div($grid-gutter, 2);
            }
        }
    }
}

/* Generates classes like: */
/* .col-sm-6, .col-md-4, .col-lg-3, .col-xl-2, etc. */

Using the Grid

<div class="container">
    <div class="row">
        <div class="col-12 col-md-6 col-lg-4">Card 1</div>
        <div class="col-12 col-md-6 col-lg-4">Card 2</div>
        <div class="col-12 col-md-12 col-lg-4">Card 3</div>
    </div>
</div>

Offset Classes

@for $i from 1 through $grid-columns - 1 {
    .col-offset-#{$i} {
        margin-left: math.div(100%, $grid-columns) * $i;
    }
}

// Usage: center a 6-column element
// <div class="col-6 col-offset-3">Centered</div>

Key Takeaways

• @for loops generate all 12 column classes from a single rule
• Column width = (100% / 12) × n using math.div()
• @each iterates through breakpoints to create responsive classes
• String interpolation #{$var} creates dynamic class names
• This is exactly how Bootstrap's grid works under the hood