Responsive grid with breakpoints in SASS - Browser Rendering Trace

Render Flow - Responsive grid with breakpoints

Read HTML grid container

↓

Read grid items

↓

Parse SASS variables and mixins

↓

Compile SASS to CSS

↓

Apply CSS grid styles

↓

Apply media queries for breakpoints

↓

Calculate grid layout per viewport width

↓

Paint grid and items

↓

Composite final layout

The browser reads the HTML grid container and items, compiles the SASS code into CSS including media queries for breakpoints, then applies the grid layout styles. It recalculates layout when viewport size changes to adapt the grid responsively.

Render Steps - 3 Steps

Code Added:display: grid; gap: 1rem; grid-template-columns: repeat(1, 1fr);

Before

[grid-container]
  [1]
  [2]
  [3]
  [4]

→

After

[grid-container]
  [1]
  [2]
  [3]
  [4]

The container becomes a grid with one column, so items stack vertically with spacing between them.

🔧 Browser Action:Creates grid formatting context, calculates single column layout, triggers reflow

Code Sample

A grid container with 4 items that shows 1 column on small screens, 2 columns on medium screens, and 4 columns on large screens, with spacing and styling for clarity.

SASS

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

SASS

$gap: 1rem;
$columns-small: 1;
$columns-medium: 2;
$columns-large: 4;

.grid-container {
  display: grid;
  gap: $gap;
  grid-template-columns: repeat(#{$columns-small}, 1fr);

  @media (min-width: 600px) {
    grid-template-columns: repeat(#{$columns-medium}, 1fr);
  }

  @media (min-width: 900px) {
    grid-template-columns: repeat(#{$columns-large}, 1fr);
  }
}

.grid-item {
  background-color: #a0c4ff;
  padding: 1rem;
  text-align: center;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

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

A Four columns in one row

B One column stacked vertically

C Two columns and two rows

D Items overlap each other

Common Confusions - 3 Topics

Why do grid items stack vertically on small screens even though I set multiple columns?

Because the default grid-template-columns is set to one column for small screens (step 1). The multiple columns only apply inside media queries at larger widths (steps 2 and 3).

💡 Grid columns change only when media queries activate; before that, items stack.

Why does the grid suddenly change layout when I resize the browser?

Because media queries detect viewport width changes and apply different grid-template-columns values (steps 2 and 3), causing the grid to reflow with new columns.

💡 Media queries trigger layout changes at breakpoints.

Why is there space between grid items but no margin on the items themselves?

The gap property on the grid container adds spacing between items without needing margins on each item (step 1). This keeps spacing consistent and easier to manage.

💡 Use gap on grid container for spacing, not margins on items.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Creates grid container for children	Layout container
gap	1rem	Both	Adds space between grid items	Spacing between items
grid-template-columns	repeat(1, 1fr)	Horizontal	One column layout, items stacked vertically	Small screens
grid-template-columns	repeat(2, 1fr)	Horizontal	Two equal columns, items arranged in rows	Medium screens
grid-template-columns	repeat(4, 1fr)	Horizontal	Four equal columns, items in one row	Large screens
@media (min-width: ...)	N/A	N/A	Applies styles only at certain viewport widths	Responsive design

Concept Snapshot

Responsive grid uses CSS grid with media queries. Set grid-template-columns for different screen widths. Use gap for spacing between items. Media queries change columns at breakpoints. Items rearrange automatically as viewport changes.

Practice

1. What is the main purpose of using breakpoints in a responsive grid with Sass?

easy

A. To add colors to the grid items

B. To disable the grid on small screens

C. To increase font size only

D. To change the number of columns based on screen size

Solution

1. Step 1: Understand breakpoints in responsive design

   Breakpoints are screen widths where layout changes to fit device size better.

2. Step 2: Role of breakpoints in grids

   They adjust the number of columns so content fits nicely on different screens.

3. Final Answer:

   To change the number of columns based on screen size -> Option D

4. Quick Check:

   Breakpoints adjust layout = B [OK]

Hint: Breakpoints change layout, not just colors or fonts [OK]

Common Mistakes:

• Thinking breakpoints only change colors
• Believing breakpoints disable grids
• Assuming breakpoints only affect fonts

2. Which Sass syntax correctly defines a media query mixin for a breakpoint at 768px?

easy

A. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }

B. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }

C. @mixin breakpoint { @media (min-width: 768px) { @content; } }

D. @mixin breakpoint { @media (max-width: 768px) { @content; } }

Solution

1. Step 1: Understand mixin with parameter

   Mixin should accept a size parameter to be reusable for any breakpoint.

2. Step 2: Correct media query syntax

   Use min-width for breakpoints that apply styles at or above the size.

3. Final Answer:

   @mixin breakpoint($size) { @media (min-width: $size) { @content; } } -> Option A

4. Quick Check:

   Mixin with parameter and min-width = A [OK]

Hint: Use parameters for flexible breakpoints in mixins [OK]

Common Mistakes:

• Forgetting to add parameter for size
• Using max-width instead of min-width incorrectly
• Not including @content inside media query

3. Given the Sass code below, what will be the number of columns on a screen 800px wide?

@mixin breakpoint($size) {
  @media (min-width: $size) {
    @content;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  @include breakpoint(600px) {
    grid-template-columns: repeat(2, 1fr);
  }
  @include breakpoint(900px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

medium

A. 2 columns

B. No columns, grid disabled

C. 3 columns

D. 1 column

Solution

1. Step 1: Check screen width against breakpoints

   Screen is 800px wide, which is >= 600px but < 900px.

2. Step 2: Determine applied grid-template-columns

   At 600px breakpoint, columns become 2; 900px breakpoint not reached yet.

3. Final Answer:

   2 columns -> Option A

4. Quick Check:

   800px between 600 and 900 = 2 columns [OK]

Hint: Compare screen width to breakpoints in order [OK]

Common Mistakes:

• Choosing 3 columns thinking 800px is above 900px
• Choosing 1 column ignoring breakpoint overrides
• Assuming grid disables at certain widths

4. Identify the error in this Sass code for a responsive grid:

@mixin breakpoint($size) {
  @media min-width: $size {
    @content;
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  @include breakpoint(768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

medium

A. grid-template-columns syntax is invalid

B. Missing parentheses around media query condition

C. Wrong mixin name

D. No error, code is correct

Solution

1. Step 1: Check media query syntax in mixin

   Media queries require parentheses around conditions, e.g., (min-width: 768px).

2. Step 2: Identify missing parentheses

   Code has @media min-width: $size without parentheses, causing syntax error.

3. Final Answer:

   Missing parentheses around media query condition -> Option B

4. Quick Check:

   Media query needs parentheses = C [OK]

Hint: Always wrap media query conditions in parentheses [OK]

Common Mistakes:

• Omitting parentheses in @media
• Confusing mixin name with media query
• Thinking grid-template-columns syntax is wrong

5. You want a grid that shows 1 column on small screens, 2 columns on medium (≥600px), and 4 columns on large (≥1200px). Which Sass code correctly implements this using a breakpoint mixin?

hard

A. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(1, 1fr);
}
}

B. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(1, 1fr);
}
}

C. @mixin breakpoint($size) { @media (min-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(4, 1fr);
}
}

D. @mixin breakpoint($size) { @media (max-width: $size) { @content; } }
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
@include breakpoint(600px) {
grid-template-columns: repeat(4, 1fr);
}
@include breakpoint(1200px) {
grid-template-columns: repeat(2, 1fr);
}
}

Solution

1. Step 1: Understand breakpoint directions

   Use min-width to apply styles at or above the breakpoint size.

2. Step 2: Check column counts for each breakpoint

   Default 1 column, 2 columns at ≥600px, 4 columns at ≥1200px matches @mixin breakpoint($size) { @media (min-width: $size) { @content; } } .grid { display: grid; grid-template-columns: repeat(1, 1fr); @include breakpoint(600px) { grid-template-columns: repeat(2, 1fr); } @include breakpoint(1200px) { grid-template-columns: repeat(4, 1fr); } }.

3. Final Answer:

   @mixin breakpoint($size) { @media (min-width: $size) { @content; } } .grid { display: grid; grid-template-columns: repeat(1, 1fr); @include breakpoint(600px) { grid-template-columns: repeat(2, 1fr); } @include breakpoint(1200px) { grid-template-columns: repeat(4, 1fr); } } -> Option C

4. Quick Check:

   min-width with increasing columns = A [OK]

Hint: Use min-width and increase columns with larger breakpoints [OK]

Common Mistakes:

• Using max-width instead of min-width
• Setting default columns incorrectly
• Reversing column counts at breakpoints