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.