Grid system mixin from scratch in SASS - Browser Rendering Trace

Render Flow - Grid system mixin from scratch

[Read @mixin grid] -> [Parse parameters] -> [Generate CSS grid properties] -> [Apply to container] -> [Render grid layout] -> [Place grid items]

The browser reads the Sass mixin, compiles it into CSS with grid properties, applies these styles to the container, then calculates and renders the grid layout placing items accordingly.

Render Steps - 4 Steps

Code Added:display: grid;

Before

[container]
  [item 1]
  [item 2]
  [item 3]
  [item 4]

→

After

[container: grid]
  [item 1]
  [item 2]
  [item 3]
  [item 4]

Setting display to grid changes the container to a grid layout, placing items in a single column using implicit grid tracks by default.

🔧 Browser Action:Creates grid formatting context, triggers layout recalculation

Code Sample

This code creates a 4-column grid container with gaps between items, styling each item with background color and padding.

SASS

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

SASS

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

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

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

Render Quiz - 3 Questions

After applying step 2, how are the grid items arranged?

A In 4 equal columns in a single row

B Stacked vertically in one column

C Randomly placed overlapping each other

D In 2 columns and 2 rows

Common Confusions - 3 Topics

Why do grid items stretch to fill the column width?

By default, grid items stretch to fill their grid area horizontally and vertically unless you change align-items or justify-items.

💡 Grid items fill their grid cells unless alignment properties override.

Why is there no space between rows if I only set gap horizontally?

The gap property sets both row and column gaps unless you specify row-gap and column-gap separately.

💡 Use gap for both directions or row-gap/column-gap for specific control.

Why doesn't my grid container shrink smaller than its content?

Grid containers by default expand to fit content and grid tracks; use max-width or width to control container size.

💡 Control container size explicitly to prevent unwanted expansion.

Property Reference

Property	Value Applied	Visual Effect	Common Use
display	grid	Creates grid container, enables grid layout	Layout container for grid items
grid-template-columns	repeat(4, 1fr)	Defines 4 equal columns	Set number and size of columns
gap	1rem	Adds space between grid items	Control spacing between items
padding	1rem (on items)	Adds space inside items	Improve readability and spacing
background-color	#4a90e2 (items)	Colors items for visibility	Visual distinction of items
border-radius	0.5rem (items)	Rounds corners of items	Aesthetic styling

Concept Snapshot

Grid system mixin creates a grid container with columns and gaps. Key properties: display: grid, grid-template-columns, gap. Items automatically fill grid cells evenly. Gaps add space between items horizontally and vertically. Styling items improves visual clarity. Use mixins to reuse grid setups easily.

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