Why custom grids offer control in SASS - Why It Works This Way

Overview - Why custom grids offer control

What is it?

Custom grids are layouts you create yourself using CSS or Sass to arrange content on a webpage. They let you decide how many columns or rows you want and how big each part should be. Instead of using fixed templates, you build a flexible structure that fits your design perfectly. This helps make websites look neat and organized on all screen sizes.

Why it matters

Without custom grids, web pages can look messy or not fit well on different devices. Custom grids solve this by giving you full control over layout, so content adapts smoothly. This means better user experience and easier design changes. Imagine trying to fit furniture in a room without measuring; custom grids are like measuring tape for your webpage layout.

Where it fits

Before learning custom grids, you should understand basic CSS layout concepts like boxes, margins, and padding. After mastering custom grids, you can explore advanced responsive design, CSS Grid and Flexbox frameworks, and Sass mixins for reusable layouts.

Mental Model

Core Idea

Custom grids let you build your own flexible layout structure so you control exactly how content fits and flows on any screen.

Think of it like...

It's like arranging books on a shelf where you decide how many shelves, how tall each shelf is, and how books fit perfectly without wasted space.

┌───────────────┐
│  Custom Grid  │
├─────┬─────┬───┤
│Col1 │Col2 │...│
├─────┼─────┼───┤
│Row1 │     │   │
├─────┼─────┼───┤
│Row2 │     │   │
└─────┴─────┴───┘

You define columns and rows sizes, then place content inside.

Build-Up - 6 Steps

1

Foundation

Understanding grid basics

Concept: Learn what a grid is and how it divides a page into rows and columns.

A grid is like a table made of rows and columns. Each cell can hold content. CSS Grid lets you create these rows and columns with sizes you choose. For example, you can make 3 columns each 1/3 of the page wide.

Result

You can split a webpage area into equal parts to organize content.

Understanding grids as rows and columns helps you see layout as a flexible structure, not just boxes stacked randomly.

2

Foundation

Using Sass variables for grid sizes

Concept: Introduce Sass variables to store grid measurements for easy control.

$columns: 12; $gutter: 1rem; $container-width: 1200px; These variables let you change grid settings in one place, affecting the whole layout.

Result

Changing $columns or $gutter updates the grid everywhere automatically.

Using variables makes your grid flexible and easy to adjust without hunting through many lines of code.

3

Intermediate

Creating custom grid mixins

🤔Before reading on: do you think mixins can generate grid columns automatically or do you have to write each column style manually? Commit to your answer.

Concept: Learn how to write Sass mixins that build grid columns dynamically based on variables.

@mixin grid-column($span) { width: percentage($span / $columns); margin-right: $gutter; float: left; } This mixin calculates column width based on how many columns you want to span.

Result

You can write .col-6 { @include grid-column(6); } to get a column that spans half the grid.

Mixins let you automate repetitive layout code, making grids scalable and consistent.

4

Intermediate

Controlling gutters and spacing

🤔Before reading on: do you think gutters are fixed spaces or can they be customized per grid? Commit to your answer.

Concept: Understand how gutters (spaces between columns) affect layout and how to control them with variables.

Gutters prevent content from touching and improve readability. Using $gutter variable, you can increase or decrease spacing easily. For example, margin-right: $gutter; adds space after each column except the last.

Result

Adjusting $gutter changes the space between columns site-wide.

Controlling gutters centrally avoids inconsistent spacing and keeps design clean.

5

Advanced

Building responsive custom grids

🤔Before reading on: do you think a single grid setup works for all screen sizes or do you need different grids for mobile and desktop? Commit to your answer.

Concept: Learn to use media queries with Sass to change grid layouts on different screen sizes.

@media (max-width: 600px) { .col-6 { width: 100%; margin-right: 0; } } This makes columns stack vertically on small screens for better readability.

Result

Your grid adapts to mobile devices by changing column widths and spacing.

Responsive grids improve user experience by making layouts flexible across devices.

6

Expert

Advanced control with nested grids

🤔Before reading on: do you think grids can be placed inside grid columns to create complex layouts or is that bad practice? Commit to your answer.

Concept: Explore nesting grids inside grid columns for complex, modular layouts.

.parent-grid { display: grid; grid-template-columns: repeat(12, 1fr); } .child-grid { grid-column: span 6; display: grid; grid-template-columns: repeat(6, 1fr); } This allows a grid inside a grid column, each with its own control.

Result

You can create detailed layouts with multiple layers of grids, each controlled separately.

Nested grids provide powerful layout control but require careful planning to avoid complexity and performance issues.

Under the Hood

Custom grids work by defining rows and columns as flexible containers using CSS properties like grid-template-columns or floats with calculated widths. Sass variables and mixins compile into CSS that browsers interpret to size and position elements. The browser calculates percentages and spacing to render the layout precisely. Media queries adjust these calculations based on screen size, enabling responsiveness.

Why designed this way?

Custom grids were designed to overcome rigid, fixed layouts that didn't adapt well to different content or devices. Sass was chosen to add programmability to CSS, letting developers write reusable, adjustable grid code. This approach balances control and maintainability, avoiding repetitive manual CSS while giving full layout flexibility.

┌─────────────────────────────┐
│ Sass variables & mixins     │
│  ┌───────────────────────┐  │
│  │ Generate CSS grid code │  │
│  └──────────┬────────────┘  │
│             │               │
│      ┌──────▼───────┐       │
│      │ CSS Grid/Flex │       │
│      └──────┬───────┘       │
│             │               │
│      ┌──────▼───────┐       │
│      │ Browser renders│      │
│      │ layout        │      │
│      └──────────────┘       │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think custom grids always require CSS Grid or Flexbox? Commit to yes or no.

Common Belief: Custom grids must use CSS Grid or Flexbox to work properly.

Reality: Custom grids can be built using floats, inline-blocks, or even positioning, especially with Sass calculations.

Why it matters: Believing only CSS Grid/Flexbox can cause learners to overlook simpler or legacy-compatible grid methods.

Quick: Do you think gutters are fixed and cannot be changed once set? Commit to yes or no.

Common Belief: Gutters are fixed spaces and cannot be customized easily.

Reality: Gutters are fully customizable using variables and mixins, allowing consistent spacing adjustments.

Why it matters: Misunderstanding gutters limits design flexibility and can cause inconsistent spacing.

Quick: Do you think nesting grids inside grids is bad practice? Commit to yes or no.

Common Belief: Nesting grids inside grids creates messy, unmanageable layouts and should be avoided.

Reality: When done carefully, nested grids enable complex, modular layouts with precise control.

Why it matters: Avoiding nested grids can limit design possibilities and force awkward layout hacks.

Quick: Do you think custom grids automatically make layouts responsive? Commit to yes or no.

Common Belief: Using custom grids means layouts will automatically adjust to all screen sizes.

Reality: Custom grids need explicit responsive rules like media queries to adapt layouts on different devices.

Why it matters: Assuming automatic responsiveness leads to poor mobile experiences and broken layouts.

Expert Zone

1

Custom grids often combine Sass calculations with CSS Grid and Flexbox for hybrid layouts, balancing control and browser support.

2

Managing gutters with negative margins and padding inside grid containers avoids layout shifts and overflow issues.

3

Nested grids require careful naming and scope management in Sass to prevent style conflicts and maintain readability.

When NOT to use

Custom grids are less suitable when you need very simple layouts or when using modern CSS frameworks that provide ready-made responsive grids. In such cases, using CSS Grid or Flexbox directly or frameworks like Bootstrap or Tailwind CSS is more efficient.

Production Patterns

In production, custom grids are often wrapped in Sass mixins and functions for reuse across projects. Teams use design tokens for grid sizes and gutters to maintain consistency. Nested grids are common in complex dashboards or component libraries where modular layout control is critical.

Connections

Modular Design

Custom grids build on modular design principles by breaking layouts into reusable parts.

Understanding modular design helps you create grids that are flexible and maintainable, just like building blocks.

Responsive Web Design

Custom grids are a key tool to implement responsive design by adapting layouts to screen sizes.

Knowing responsive design principles guides how you set up grid breakpoints and flexible columns.

Urban Planning

Both custom grids and urban planning organize space efficiently for function and aesthetics.

Seeing layout as spatial organization helps grasp grid control as arranging content like city blocks for best flow.

Common Pitfalls

#1 Hardcoding column widths without variables

Wrong approach:

.col-4 { width: 33.33%; margin-right: 20px; }

Correct approach:

$gutter: 1rem;
$columns: 12;
@mixin grid-column($span) {
width: percentage($span / $columns);
margin-right: $gutter;
}
.col-4 { @include grid-column(4); }

Root cause:

Not using variables or mixins makes it hard to update grid sizes or gutters consistently.

#2 Ignoring gutters on last column causing overflow

Wrong approach:

.col { float: left; width: 25%; margin-right: 1rem; }

Correct approach:

.col { float: left; width: 25%; margin-right: 1rem; }
.col:last-child { margin-right: 0; }

Root cause:

Applying gutter margin to all columns including the last causes layout overflow and horizontal scroll.

#3 Not adding responsive rules for small screens

Wrong approach:

.col-6 { width: 50%; }

Correct approach:

@media (max-width: 600px) {
.col-6 { width: 100%; margin-right: 0; }
}

Root cause:

Assuming fixed widths work on all devices leads to broken layouts on mobiles.

Key Takeaways

Custom grids give you full control over webpage layout by letting you define rows, columns, and spacing exactly how you want.

Using Sass variables and mixins makes grids flexible, reusable, and easy to update across your whole site.

Responsive design requires adding media queries to your custom grids so layouts adapt smoothly to different screen sizes.

Nested grids allow complex layouts but need careful planning to avoid confusion and maintain performance.

Understanding the mechanics behind custom grids helps you avoid common mistakes and build clean, maintainable layouts.