🏗️ Lesson 6: Building Grid Systems

What is a Grid System?

A grid system is a complete set of utilities that makes building layouts easy and consistent. It includes:

• Container widths and responsive breakpoints
• Column spanning and positioning utilities
• Gap/spacing utilities
• Responsive modifiers
• Layout patterns (auto-fill, auto-fit, etc.)

Step 1: Configuration

Start with a configuration file defining your design tokens:

// _grid-config.scss
// ==================

// Grid columns
$grid-columns: 12;

// Breakpoints
$breakpoints: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

// Spacing scale (in pixels)
$spacing: (
  0: 0,
  1: 4px,
  2: 8px,
  3: 12px,
  4: 16px,
  5: 20px,
  6: 24px,
  8: 32px,
  10: 40px,
  12: 48px,
  16: 64px,
  20: 80px
);

// Container max-widths
$containers: (
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px
);

Step 2: Helper Functions

// _grid-functions.scss
// ====================

// Get breakpoint value
@function breakpoint($name) {
  @return map-get($breakpoints, $name);
}

// Get spacing value
@function spacing($key) {
  @return map-get($spacing, $key);
}

// Calculate column width
@function col-width($span, $total: $grid-columns) {
  @return percentage($span / $total);
}

Step 3: Base Container

// _grid-container.scss
// ====================

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: spacing(4);
  padding-right: spacing(4);

  @each $name, $width in $containers {
    @media (min-width: breakpoint($name)) {
      max-width: $width;
    }
  }
}

.container-fluid {
  width: 100%;
  padding-left: spacing(4);
  padding-right: spacing(4);
}

Step 4: Grid Display Classes

// _grid-display.scss
// ==================

.grid {
  display: grid;
}

// Generate grid-cols-* classes
@for $i from 1 through $grid-columns {
  .grid-cols-#{$i} {
    grid-template-columns: repeat($i, 1fr);
  }
}

// Auto layout classes
.grid-cols-auto {
  grid-template-columns: auto;
}

.grid-cols-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.grid-cols-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Step 5: Column Spanning

// _grid-columns.scss
// ==================

// Column span utilities
@for $i from 1 through $grid-columns {
  .col-span-#{$i} {
    grid-column: span $i / span $i;
  }
}

.col-span-full {
  grid-column: 1 / -1;
}

// Column start positions
@for $i from 1 through ($grid-columns + 1) {
  .col-start-#{$i} {
    grid-column-start: $i;
  }
  
  .col-end-#{$i} {
    grid-column-end: $i;
  }
}

// Auto column placement
.col-auto {
  grid-column: auto;
}

Step 6: Row Utilities

// _grid-rows.scss
// ===============

// Row span utilities
@for $i from 1 through 6 {
  .row-span-#{$i} {
    grid-row: span $i / span $i;
  }
}

.row-span-full {
  grid-row: 1 / -1;
}

// Row start/end positions
@for $i from 1 through 7 {
  .row-start-#{$i} {
    grid-row-start: $i;
  }
  
  .row-end-#{$i} {
    grid-row-end: $i;
  }
}

.row-auto {
  grid-row: auto;
}

Step 7: Gap Utilities

// _grid-gaps.scss
// ===============

// Generate gap utilities
@each $name, $size in $spacing {
  .gap-#{$name} {
    gap: $size;
  }
  
  .gap-x-#{$name} {
    column-gap: $size;
  }
  
  .gap-y-#{$name} {
    row-gap: $size;
  }
}

Step 8: Responsive Modifiers

// _grid-responsive.scss
// =====================

@each $bp-name, $bp-value in $breakpoints {
  @media (min-width: $bp-value) {
    
    // Grid columns
    @for $i from 1 through $grid-columns {
      .#{$bp-name}\:grid-cols-#{$i} {
        grid-template-columns: repeat($i, 1fr);
      }
      
      .#{$bp-name}\:col-span-#{$i} {
        grid-column: span $i / span $i;
      }
    }
    
    // Gaps
    @each $name, $size in $spacing {
      .#{$bp-name}\:gap-#{$name} {
        gap: $size;
      }
    }
    
    // Display
    .#{$bp-name}\:grid {
      display: grid;
    }
    
    .#{$bp-name}\:hidden {
      display: none;
    }
  }
}

Step 9: Master Import File

// grid-system.scss
// ================
// Import this file to get the complete grid system

@import 'grid-config';
@import 'grid-functions';
@import 'grid-container';
@import 'grid-display';
@import 'grid-columns';
@import 'grid-rows';
@import 'grid-gaps';
@import 'grid-responsive';

Complete Example: Real Layout

// HTML using your grid system
<div class="container">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    
    <!-- Sidebar - spans 1 column on mobile, 1 on desktop -->
    <aside class="col-span-1">
      <!-- Sidebar content -->
    </aside>
    
    <!-- Main content - spans 1 column on mobile, 2 on desktop -->
    <main class="col-span-1 md:col-span-2">
      
      <!-- Nested grid for cards -->
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="card">Card 1</div>
        <div class="card">Card 2</div>
        <div class="card">Card 3</div>
        <div class="card">Card 4</div>
      </div>
      
    </main>
  </div>
</div>

Advanced: Grid Template Areas

// _grid-areas.scss
// ================

// Mixin for named grid areas
@mixin grid-area($name) {
  grid-area: $name;
}

// Common layout patterns
.layout-holy-grail {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav    main   aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  gap: spacing(4);
  min-height: 100vh;
}

.layout-header { @include grid-area(header); }
.layout-nav    { @include grid-area(nav); }
.layout-main   { @include grid-area(main); }
.layout-aside  { @include grid-area(aside); }
.layout-footer { @include grid-area(footer); }

Optimization Tips

Level 2 Complete!

Congratulations! You've built a complete grid system using:

• ✅ Variables for configuration
• ✅ Functions for calculations
• ✅ Mixins for patterns
• ✅ Loops for generation
• ✅ Maps for organization

In Level 3, you'll learn expert techniques for optimization, theming, and advanced layout patterns!