Lesson 3: Grid Mixins | Gridlock Holmes

What are Mixins?

Mixins are like reusable chunks of code. You define a mixin once with @mixin, then use it anywhere with @include. Think of them as CSS functions - you can even pass parameters to customize the output!

💡 Why Mixins Matter:

Instead of copying the same grid code across your project, create a mixin once and reuse it. Change the mixin, and it updates everywhere automatically!

Your First Grid Mixin

Let's create a simple mixin for a basic grid:

// Define the mixin
@mixin basic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

// Use it anywhere
.product-grid {
  @include basic-grid;
}

.blog-grid {
  @include basic-grid;
}

Both .product-grid and .blog-grid now have the same grid styles!

Mixins with Parameters

The real power comes from parameters. Make your mixins flexible:

// Mixin with parameters
@mixin grid-layout($columns, $gap) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

// Use with different values
.small-grid {
  @include grid-layout(2, 10px);
}

.large-grid {
  @include grid-layout(4, 30px);
}

Now you can create different grids by changing the numbers!

Default Parameter Values

Make parameters optional by providing defaults:

@mixin grid-layout($columns: 3, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

// Use with defaults
.grid-1 {
  @include grid-layout;  // 3 columns, 20px gap
}

// Override just columns
.grid-2 {
  @include grid-layout(4);  // 4 columns, 20px gap
}

// Override both
.grid-3 {
  @include grid-layout(2, 40px);  // 2 columns, 40px gap
}

Real-World Responsive Grid Mixin

Here's a practical mixin for responsive grids:

@mixin responsive-grid(
  $mobile-cols: 1,
  $tablet-cols: 2,
  $desktop-cols: 3,
  $gap: 20px
) {
  display: grid;
  grid-template-columns: repeat($mobile-cols, 1fr);
  gap: $gap;

  @media (min-width: 768px) {
    grid-template-columns: repeat($tablet-cols, 1fr);
  }

  @media (min-width: 1024px) {
    grid-template-columns: repeat($desktop-cols, 1fr);
  }
}

// Use it!
.product-grid {
  @include responsive-grid(1, 2, 4, 24px);
}

.blog-grid {
  @include responsive-grid(1, 2, 3);
}

One mixin handles mobile, tablet, and desktop layouts. Beautiful!

✅ Pro Pattern:

Create a library of grid mixins at the top of your SCSS file. Then use them throughout your project for consistent, maintainable layouts.

Advanced: Grid Area Mixin

Create a mixin for positioning items in a grid:

@mixin grid-area($row-start, $col-start, $row-end, $col-end) {
  grid-row: $row-start / $row-end;
  grid-column: $col-start / $col-end;
}

.dashboard {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(6, 100px);
  gap: 16px;

  .header {
    @include grid-area(1, 1, 2, 13);  // Full width
  }

  .sidebar {
    @include grid-area(2, 1, 7, 3);   // Left side
  }

  .main {
    @include grid-area(2, 3, 7, 13);  // Right side
  }
}

Mixin for Common Grid Patterns

// Holy Grail Layout
@mixin holy-grail($sidebar-width: 250px, $gap: 20px) {
  display: grid;
  grid-template-columns: $sidebar-width 1fr $sidebar-width;
  grid-template-rows: auto 1fr auto;
  gap: $gap;
}

// Card Grid
@mixin card-grid($min-width: 250px, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax($min-width, 1fr));
  gap: $gap;
}

// Masonry-style Grid
@mixin masonry-grid($columns: 3, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
  grid-auto-rows: 10px;
}

// Use them
.layout {
  @include holy-grail(300px, 24px);
}

.gallery {
  @include card-grid(200px, 16px);
}

.pinterest-style {
  @include masonry-grid(4, 12px);
}

Combining Variables and Mixins

Use variables inside mixins for maximum flexibility:

// Design system variables
$breakpoint-sm: 640px;
$breakpoint-md: 768px;
$breakpoint-lg: 1024px;

$spacing-sm: 12px;
$spacing-md: 20px;
$spacing-lg: 32px;

// Flexible responsive mixin
@mixin responsive-grid-system(
  $mobile: 1,
  $tablet: 2,
  $desktop: 3,
  $gap-mobile: $spacing-sm,
  $gap-desktop: $spacing-lg
) {
  display: grid;
  grid-template-columns: repeat($mobile, 1fr);
  gap: $gap-mobile;

  @media (min-width: $breakpoint-md) {
    grid-template-columns: repeat($tablet, 1fr);
  }

  @media (min-width: $breakpoint-lg) {
    grid-template-columns: repeat($desktop, 1fr);
    gap: $gap-desktop;
  }
}

// Clean usage
.content-grid {
  @include responsive-grid-system(1, 2, 4);
}

When to Use Mixins

✅ Use Mixins For:

Repeated grid patterns across your site
Responsive layouts that need the same breakpoints
Complex grid positioning logic
Design system consistency

❌ Don't Use Mixins For:

One-off layouts used in only one place
Very simple grids (just write them directly)
When a simple variable would work instead

⚡ Performance Note:

Each @include copies the mixin's code into the compiled CSS. If you use the same mixin 100 times, you get 100 copies of that code. For very simple patterns, consider using a CSS class instead.

Level 1 Complete!

Congratulations! You've mastered the SCSS basics:

✅ Variables for reusable values
✅ Nesting for organized code
✅ Mixins for reusable patterns

In Level 2, you'll learn advanced SCSS techniques like functions, loops, and building complete grid systems!

🎨 Lesson 3: Grid Mixins