Bird
Raised Fist0
SASSmarkup~5 mins

Why custom grids offer control 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

Custom grids let you design page layouts exactly how you want. They give you control over spacing, columns, and alignment.

When you want a unique page layout that standard grids can't create.
When you need precise control over how content fits on different screen sizes.
When you want to create a consistent design system for your website.
When you want to easily adjust spacing and alignment without rewriting HTML.
When you want to build responsive layouts that adapt smoothly to devices.
Syntax
SASS
@mixin custom-grid($columns, $gap) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

This mixin creates a grid with a set number of columns and gap size.

You can reuse it with different values to make many grid layouts.

Examples
Creates a grid with 3 equal columns and 1rem gap between them.
SASS
@include custom-grid(3, 1rem);
Creates a grid with 4 columns and larger 2rem gaps for more space.
SASS
@include custom-grid(4, 2rem);
Creates a tighter grid with 2 columns and small gaps.
SASS
@include custom-grid(2, 0.5rem);
Sample Program

This example uses a custom grid mixin to create a 3-column layout with equal spacing. Each item is styled for clear visibility and accessibility roles are added.

SASS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Custom Grid Example</title>
  <style>
    /* Sass mixins cannot be used directly in <style> tags; this is for demonstration only. */
    /* In practice, compile Sass to CSS before using in HTML. */
  </style>
</head>
<body>
  <section class="grid-container" role="grid" aria-label="Sample custom grid">
    <div class="grid-item" role="gridcell">Item 1</div>
    <div class="grid-item" role="gridcell">Item 2</div>
    <div class="grid-item" role="gridcell">Item 3</div>
  </section>
</body>
</html>
OutputSuccess
Important Notes

Custom grids let you change columns and gaps easily without changing HTML.

Using mixins keeps your code clean and reusable.

Always add roles and labels for accessibility when using grids.

Summary

Custom grids give you full control over layout columns and spacing.

They help create flexible, reusable designs that adapt well to different screens.

Using Sass mixins makes it easy to apply and change grid settings.

Practice

(1/5)
1. Why do custom grids in Sass give you more control over your webpage layout?
easy
A. Because you can define exact column sizes and spacing easily
B. Because they automatically fix all browser bugs
C. Because they remove the need for any CSS at all
D. Because they force all elements to be the same size

Solution

  1. Step 1: Understand what custom grids do

    Custom grids let you set specific column widths and gaps, unlike fixed grids.

  2. Step 2: Recognize the benefit of control

    This control helps you create layouts that fit your design needs exactly.

  3. Final Answer:

    Because you can define exact column sizes and spacing easily -> Option A

  4. Quick Check:

    Custom grids = precise layout control [OK]
Hint: Custom grids let you set sizes and gaps yourself [OK]
Common Mistakes:
  • Thinking custom grids fix browser bugs automatically
  • Believing custom grids remove all CSS needs
  • Assuming custom grids force uniform element sizes
2. Which Sass syntax correctly defines a mixin for a custom grid with 12 columns?
easy
A. @mixin grid-columns($count) { columns: $count; }
B. @function grid($columns) { return repeat($columns, 1fr); }
C. @include grid(12) { display: flex; }
D. @mixin grid($columns) { display: grid; grid-template-columns: repeat($columns, 1fr); }

Solution

  1. Step 1: Identify correct mixin syntax

    Mixins use @mixin with parameters and CSS inside curly braces.

  2. Step 2: Check grid-template-columns usage

    Using repeat($columns, 1fr) sets equal columns, correct for grids.

  3. Final Answer:

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

  4. Quick Check:

    @mixin + repeat() = correct grid mixin [OK]
Hint: Mixins start with @mixin and include CSS rules inside braces [OK]
Common Mistakes:
  • Using @function instead of @mixin for CSS blocks
  • Trying to include mixin with parameters incorrectly
  • Using 'columns' property which is not for grid layout
3. Given this Sass mixin and usage:
@mixin custom-grid($cols) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: 1rem;
}

.container {
  @include custom-grid(3);
}

What will be the visual layout of elements inside .container?
medium
A. A flexbox layout with items stacked vertically
B. A single column with 3rem gap
C. Three equal columns with 1rem gap between them
D. Three columns with different widths and no gap

Solution

  1. Step 1: Analyze the mixin properties

    display: grid sets grid layout; grid-template-columns: repeat(3, 1fr) creates 3 equal columns.

  2. Step 2: Understand gap property

    gap: 1rem adds space of 1rem between columns and rows.

  3. Final Answer:

    Three equal columns with 1rem gap between them -> Option C

  4. Quick Check:

    repeat(3, 1fr) + gap:1rem = 3 equal spaced columns [OK]
Hint: repeat(n, 1fr) means n equal columns [OK]
Common Mistakes:
  • Confusing gap size units
  • Thinking grid creates flexbox layout
  • Assuming columns have different widths
4. Identify the error in this Sass code for a custom grid mixin:
@mixin grid($cols) {
  display: grid;
  grid-template-columns: repeat($cols 1fr);
  gap: 1rem;
}
medium
A. Missing comma between $cols and 1fr in repeat()
B. Using display: grid instead of flex
C. gap property should be gap: 1px
D. Mixin name cannot be 'grid'

Solution

  1. Step 1: Check repeat() syntax

    repeat() requires a comma between the count and size: repeat($cols, 1fr).

  2. Step 2: Verify other properties

    display: grid and gap: 1rem are correct and valid.

  3. Final Answer:

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

  4. Quick Check:

    repeat() needs comma between arguments [OK]
Hint: repeat() arguments must be comma-separated [OK]
Common Mistakes:
  • Omitting comma inside repeat()
  • Confusing grid with flex display
  • Changing gap units unnecessarily
5. You want a responsive custom grid in Sass that changes from 4 columns on large screens to 2 columns on small screens. Which approach gives you the best control?
hard
A. Write fixed CSS with 4 columns only and rely on browser zoom for small screens
B. Use a mixin with a parameter for columns and add media queries inside it to adjust columns based on screen width
C. Use a mixin that always sets 2 columns regardless of screen size
D. Avoid grids and use floats for layout instead

Solution

  1. Step 1: Understand responsive design needs

    Layouts must adapt to screen size, so columns should change with media queries.

  2. Step 2: Use mixin with parameters and media queries

    Mixins let you reuse code and media queries inside them adjust columns dynamically.

  3. Final Answer:

    Use a mixin with a parameter for columns and add media queries inside it to adjust columns based on screen width -> Option B

  4. Quick Check:

    Mixin + media queries = flexible responsive grid [OK]
Hint: Combine mixins with media queries for responsive grids [OK]
Common Mistakes:
  • Using fixed columns without responsiveness
  • Ignoring media queries for screen sizes
  • Using floats which are outdated for grids