Responsive grid with breakpoints in SASS - Performance & Optimization

Performance: Responsive grid with breakpoints

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how many grid items and styles are applied at different screen sizes.

Creating a responsive grid layout that adapts to screen size

SASS

$breakpoints: (small: 600px, medium: 900px);
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  @media (max-width: map-get($breakpoints, medium)) {
    grid-template-columns: repeat(2, 1fr);
  }
  @media (max-width: map-get($breakpoints, small)) {
    grid-template-columns: 1fr;
  }
}

Uses a single grid container with breakpoint variables and minimal media queries to reduce CSS duplication and layout recalculations.

📈 Performance GainSingle reflow per breakpoint change; smaller CSS bundle size

Creating a responsive grid layout that adapts to screen size

SASS

@media (max-width: 600px) { .grid-item { width: 100%; } } @media (max-width: 900px) { .grid-item { width: 50%; } } @media (min-width: 901px) { .grid-item { width: 25%; } }

Multiple overlapping media queries with repeated properties cause redundant CSS and force multiple layout recalculations on resize.

📉 Performance CostTriggers multiple reflows on viewport resize; increases CSS size unnecessarily

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple overlapping media queries with repeated widths	Low (grid container + items)	Multiple reflows on resize	Medium paint cost due to layout changes	[X] Bad
Single grid container with breakpoint variables and minimal media queries	Low (grid container + items)	Single reflow per breakpoint change	Lower paint cost due to efficient layout	[OK] Good

Rendering Pipeline

The browser applies CSS rules during Style Calculation, then computes Layout based on grid-template-columns. Changing breakpoints triggers recalculation of layout and paint.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating grid columns on breakpoint changes

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how many grid items and styles are applied at different screen sizes.

Optimization Tips

1Use variables for breakpoint values to keep media queries consistent and minimal.

2Avoid repeating the same CSS properties in multiple media queries to reduce CSS size.

3Test breakpoint changes in DevTools Performance panel to ensure minimal layout recalculations.

Performance Quiz - 3 Questions

What is a main performance benefit of using breakpoint variables in Sass for responsive grids?

A It reduces CSS duplication and simplifies media queries

B It increases the number of media queries for better control

C It forces the browser to recalculate layout more often

D It adds more DOM nodes for each breakpoint

DevTools: Performance

How to check: Record a performance profile while resizing the browser window to trigger breakpoints. Observe the number of layout recalculations and style recalculations.

What to look for: Look for fewer Layout events and shorter Layout durations indicating efficient breakpoint handling.

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