Bird
Raised Fist0
SASSmarkup~5 mins

Grid system mixin from scratch in SASS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

A grid system helps arrange content neatly in rows and columns. A mixin lets you reuse grid code easily in your styles.

You want to create a layout with columns that adjust on different screen sizes.
You need a simple way to divide a page into equal parts without writing repetitive code.
You want to build a responsive design that looks good on phones and computers.
You want to control spacing between items in a flexible way.
You want to keep your CSS clean by reusing grid code with a mixin.
Syntax
SASS
@mixin grid($columns, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

$columns sets how many columns you want.

$gap sets space between columns and rows, default is 1rem.

Examples
This is the basic mixin to create a grid with equal columns and space between them.
SASS
@mixin grid($columns, $gap: 1rem) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}
Creates a grid container with 3 equal columns and default gap of 1rem.
SASS
.container {
  @include grid(3);
}
Creates a grid container with 4 columns and 2rem gap between items.
SASS
.container {
  @include grid(4, 2rem);
}
Sample Program

This example shows a grid container with 3 columns and 1.5rem gap. On small screens, it changes to 1 column for easy reading. Each item is styled with color and padding. The container uses the grid mixin for layout.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Grid System Mixin Example</title>
  <style type="text/scss">
    @mixin grid($columns, $gap: 1rem) {
      display: grid;
      grid-template-columns: repeat($columns, 1fr);
      gap: $gap;
    }

    .container {
      @include grid(3, 1.5rem);
      background-color: #f0f0f0;
      padding: 1rem;
    }

    .item {
      background-color: #4a90e2;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.5rem;
      font-weight: bold;
      font-size: 1.2rem;
    }

    @media (max-width: 600px) {
      .container {
        @include grid(1, 1rem);
      }
    }
  </style>
</head>
<body>
  <main>
    <section class="container" aria-label="Sample grid container">
      <div class="item" tabindex="0">Item 1</div>
      <div class="item" tabindex="0">Item 2</div>
      <div class="item" tabindex="0">Item 3</div>
      <div class="item" tabindex="0">Item 4</div>
      <div class="item" tabindex="0">Item 5</div>
      <div class="item" tabindex="0">Item 6</div>
    </section>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Use repeat($columns, 1fr) to create equal width columns easily.

Set gap to control space between rows and columns at once.

Use media queries to change the number of columns on smaller screens for better readability.

Summary

A grid mixin helps create flexible column layouts with less code.

You can set how many columns and the gap between them easily.

Responsive design is simple by changing columns in media queries.

Practice

(1/5)
1. What is the main purpose of a grid system mixin in Sass?
easy
A. To create flexible column layouts with reusable code
B. To add colors to text elements
C. To write JavaScript functions inside Sass
D. To load external fonts automatically

Solution

  1. Step 1: Understand the role of mixins in Sass

    Mixins let you reuse code blocks with parameters to customize styles.

  2. Step 2: Identify what a grid system mixin does

    A grid system mixin helps create column layouts that adapt easily by changing parameters.

  3. Final Answer:

    To create flexible column layouts with reusable code -> Option A

  4. Quick Check:

    Grid mixin = flexible columns [OK]
Hint: Grid mixins simplify layout by reusing column code [OK]
Common Mistakes:
  • Confusing mixins with variables
  • Thinking mixins add colors only
  • Assuming mixins run JavaScript
2. Which of the following is the correct way to define a simple grid mixin with columns and gap parameters in Sass?
easy
A. @mixin grid($columns, $gap) { display: flex; columns: $columns; gap: $gap; }
B. @mixin grid($columns, $gap) { display: block; grid-columns: $columns; grid-gap: $gap; }
C. @mixin grid($columns, $gap) { display: grid; grid-template-columns: repeat($columns, 1fr); gap: $gap; }
D. @mixin grid($columns, $gap) { display: grid; columns: $columns; gap: $gap; }

Solution

  1. Step 1: Check the display property for grid layout

    Grid layouts require display: grid;, not flex or block.

  2. Step 2: Verify grid-template-columns and gap syntax

    Using grid-template-columns: repeat($columns, 1fr); sets equal columns, and gap: $gap; sets spacing.

  3. Final Answer:

    @mixin grid($columns, $gap) { display: grid; grid-template-columns: repeat($columns, 1fr); gap: $gap; } -> Option C

  4. Quick Check:

    Grid needs display:grid and repeat() [OK]
Hint: Use display:grid and repeat() for columns [OK]
Common Mistakes:
  • Using display:flex instead of grid
  • Using incorrect property names like columns
  • Missing repeat() function for columns
3. Given this Sass mixin and usage:
@mixin grid($cols, $gap) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: $gap;
}

.container {
  @include grid(3, 2rem);
}

What CSS will be generated for .container?
medium
A. .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
B. .container { display: flex; columns: 3; gap: 2rem; }
C. .container { display: grid; grid-template-columns: 3fr; gap: 2rem; }
D. .container { display: block; grid-template-columns: repeat(3, 1fr); gap: 2rem; }

Solution

  1. Step 1: Understand mixin parameters and usage

    The mixin sets grid display, columns with repeat, and gap using passed values 3 and 2rem.

  2. Step 2: Translate Sass mixin to CSS output

    Including the mixin with (3, 2rem) generates CSS with display: grid;, grid-template-columns: repeat(3, 1fr);, and gap: 2rem;.

  3. Final Answer:

    .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } -> Option A

  4. Quick Check:

    Mixin params = CSS properties [OK]
Hint: Repeat columns with 1fr for equal width [OK]
Common Mistakes:
  • Confusing flex with grid display
  • Writing grid-template-columns: 3fr instead of repeat()
  • Using display:block by mistake
4. Identify the error in this Sass grid mixin:
@mixin grid($cols, $gap) {
  display: grid;
  grid-template-columns: repeat($cols 1fr);
  gap: $gap;
}
medium
A. gap property is invalid in grid layouts
B. Using display:flex instead of display:grid
C. Mixin parameters should be $columns and $gaps
D. Missing comma between $cols and 1fr in repeat() function

Solution

  1. Step 1: Check syntax of repeat() function

    The repeat() function requires a comma between the number and the size, like repeat($cols, 1fr).

  2. Step 2: Verify other properties

    Display is correctly set to grid, and gap is valid for grid layouts.

  3. Final Answer:

    Missing comma between $cols and 1fr in repeat() function -> Option D

  4. Quick Check:

    repeat() needs comma [OK]
Hint: Always put a comma inside repeat() between count and size [OK]
Common Mistakes:
  • Omitting comma in repeat()
  • Confusing display:flex with grid
  • Thinking gap is invalid in grid
5. You want a responsive grid mixin that changes columns based on screen width. Which Sass code correctly adds a media query inside the mixin to set 2 columns on screens smaller than 600px and 4 columns otherwise?
hard
A. @mixin responsive-grid($gap) { display: grid; grid-template-columns: repeat(2, 1fr); gap: $gap; @media (min-width: 600px) { grid-template-columns: repeat(4, 1fr); } }
B. @mixin responsive-grid($gap) { display: grid; grid-template-columns: repeat(4, 1fr); gap: $gap; @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); } }
C. @mixin responsive-grid($gap) { display: flex; gap: $gap; @media (max-width: 600px) { flex-direction: column; } }
D. @mixin responsive-grid($gap) { display: grid; grid-template-columns: repeat(4, 1fr); gap: $gap; @media (min-width: 600px) { grid-template-columns: repeat(2, 1fr); } }

Solution

  1. Step 1: Set default columns for large screens

    The mixin sets 4 columns by default using repeat(4, 1fr).

  2. Step 2: Add media query for smaller screens

    Inside @media (max-width: 600px), columns change to 2 with repeat(2, 1fr).

  3. Step 3: Confirm display and gap properties

    Display is grid and gap uses the parameter, which is correct.

  4. Final Answer:

    @mixin responsive-grid($gap) { display: grid; grid-template-columns: repeat(4, 1fr); gap: $gap; @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); } } -> Option B

  5. Quick Check:

    Default 4 cols, max-width 600px = 2 cols [OK]
Hint: Use max-width media query for smaller screens [OK]
Common Mistakes:
  • Using min-width instead of max-width for small screens
  • Setting flex display instead of grid
  • Reversing column counts in media query