Grid system mixin from scratch in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding the purpose of a grid system mixin

What is the main benefit of using a grid system mixin in Sass when building layouts?

A It helps create reusable, consistent layout structures with customizable columns and gutters.

B It allows you to write repetitive CSS code for each grid item manually.

C It automatically generates JavaScript to control grid behavior on the page.

D It replaces the need for any CSS media queries in responsive design.

💡 Hint

Think about how mixins help avoid repeating code and keep layouts consistent.

A grid system mixin in Sass helps you write layout code once and reuse it with different settings. This makes your CSS cleaner and your layouts consistent.

📝 Syntax

intermediate

Sass mixin syntax for grid columns

Which of the following Sass mixin definitions correctly accepts two parameters: $columns and $gutter, and sets the width and margin-right accordingly?

A @mixin grid($columns, $gutter) { width: calc(100% / $columns - $gutter); margin-right: $gutter; }

B @mixin grid($columns, $gutter) { width: calc((100% / #{$columns}) - #{$gutter}); margin-right: $gutter; }

C @mixin grid($columns, $gutter) { width: calc(100% / $columns) - $gutter; margin-right: $gutter; }

D @mixin grid($columns, $gutter) { width: 100% / $columns - $gutter; margin-right: $gutter; }

💡 Hint

Remember to use interpolation inside calc() for Sass variables.

In Sass, when using variables inside calc(), you must interpolate them with #{} to output valid CSS.

❓ rendering

advanced

Visual output of grid mixin with gutter

Given this Sass mixin and usage, what will be the width and margin-right of the .item element in the compiled CSS?

SASS

@mixin grid($columns, $gutter) {
  width: calc((100% / #{$columns}) - #{$gutter});
  margin-right: $gutter;
}

.item {
  @include grid(4, 1rem);
}

A .item { width: calc(25% - 1rem); margin-right: 1rem; }

B .item { width: 25% - 1rem; margin-right: 1rem; }

C .item { width: calc((100% / 4) - 1rem); margin-right: 1rem; }

D .item { width: calc(100% / 4 - 1rem); margin-right: 1rem; }

💡 Hint

Look carefully at how Sass outputs variables inside calc() with interpolation.

The mixin outputs width: calc((100% / 4) - 1rem); exactly because of the interpolation syntax. It does not simplify to 25% automatically.

❓ selector

advanced

Selecting last grid item to remove margin

In a grid layout using a mixin that adds margin-right to each item, which CSS selector correctly targets every 4th item to remove its margin-right?

A .item:nth-child(4n) { margin-right: 0; }

B .item:nth-of-type(4) { margin-right: 0; }

C .item:last-child { margin-right: 0; }

D .item:nth-child(4) { margin-right: 0; }

💡 Hint

Think about how to select every 4th element, not just the 4th or last one.

:nth-child(4n) selects every 4th child (4, 8, 12, ...), which is needed to remove margin on last items in each row.

❓ accessibility

expert

Ensuring accessible grid layout with ARIA roles

When building a grid layout with a custom Sass mixin, which ARIA role should you add to the container to best communicate the grid structure to screen readers?

A role="list"

B role="presentation"

C role="table"

D role="grid"

💡 Hint

Consider ARIA roles that describe a grid of items, not just a list or table.

The role="grid" tells assistive technologies that the container is a grid structure, improving navigation and understanding.

Practice

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