Grid system mixin from scratch in SASS - Performance & Optimization

Performance: Grid system mixin from scratch

MEDIUM IMPACT

This affects page load speed and rendering performance by controlling how CSS grid layouts are generated and applied.

Creating a reusable grid layout with a Sass mixin

SASS

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

Using only CSS grid properties avoids manual width calculations and lets the browser optimize layout.

📈 Performance GainSingle layout pass with minimal reflows and faster paint.

Creating a reusable grid layout with a Sass mixin

SASS

@mixin grid-bad($columns) {
  display: grid;
  grid-template-columns: repeat(#{$columns}, 1fr);
  > * {
    width: calc(100% / #{$columns});
  }
}

Forcing child widths with calc() inside the mixin causes redundant layout calculations and can trigger layout thrashing.

📉 Performance CostTriggers multiple reflows per child element due to width recalculations.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual width calc in mixin	N/A	Multiple reflows per child	Higher paint cost due to layout thrashing	[X] Bad
Pure CSS grid properties	N/A	Single reflow	Lower paint cost, optimized by browser	[OK] Good

Rendering Pipeline

The grid mixin sets CSS properties that the browser uses during style calculation and layout stages. Efficient grid definitions reduce layout complexity and repaint cost.

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage is most expensive if widths are manually calculated causing reflows.

Core Web Vital Affected

LCP

This affects page load speed and rendering performance by controlling how CSS grid layouts are generated and applied.

Optimization Tips

1Avoid manual width calculations inside grid mixins to prevent layout thrashing.

2Use native CSS grid properties like grid-template-columns with repeat() for better performance.

3Test grid layouts in DevTools Performance panel to identify costly reflows and paints.

Performance Quiz - 3 Questions

What causes multiple reflows when using a grid mixin with manual width calculations?

A Applying display: grid only

B Setting child widths with calc() inside the mixin

C Using grid-template-columns with repeat()

D Using CSS variables for columns

DevTools: Performance

How to check: Record a performance profile while loading the page and interacting with the grid layout. Look for layout and paint events.

What to look for: Check for multiple layout recalculations and long layout durations indicating inefficient grid usage.