Fluid spacing with calculations in SASS - Browser Rendering Trace

Render Flow - Fluid spacing with calculations

Read SASS variables and functions

↓

Calculate spacing values using calc()

↓

Compile to CSS with fluid spacing

↓

Browser parses CSS

↓

Apply spacing dynamically based on viewport width

↓

Render updated layout

The SASS code defines spacing using calculations that combine fixed and relative units. When compiled, the browser uses these calc() values to adjust spacing fluidly as the viewport size changes.

Render Steps - 3 Steps

Code Added:display: flex;

Before

[container]
| Box 1 |
| Box 2 |
| Box 3 |

→

After

[container: flex row]
[Box 1][Box 2][Box 3]

The container changes from stacking boxes vertically to placing them side by side in a row.

🔧 Browser Action:Creates flex formatting context and lays out children in a row

Code Sample

Three boxes spaced with a gap that grows fluidly from 1rem to 3rem as the viewport width changes between 320px and 1200px.

SASS

<div class="container">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>

SASS

$min-gap: 1rem;
$max-gap: 3rem;
$min-vw: 320;
$max-vw: 1200;

.container {
  display: flex;
  gap: calc(#{$min-gap} + (#{$max-gap} - #{$min-gap}) * ((100vw - #{$min-vw}px) / (#{$max-vw} - #{$min-vw}px)));
  padding: 1rem;
}

.box {
  background-color: #8ac;
  color: white;
  padding: 1rem;
  flex: 1;
  text-align: center;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 1, how are the boxes arranged visually?

A Side by side in a row

B Stacked vertically

C Overlapping each other

D Hidden from view

Common Confusions - 2 Topics

Why doesn't the gap change smoothly when I resize the window?

If the gap uses a fixed value like 1rem, it stays the same size regardless of viewport width. Only using calc() with viewport units makes it fluid (see step 3).

💡 Use calc() with viewport units for fluid spacing.

Why do my boxes sometimes overlap or have no space between them?

Without display:flex or gap, boxes stack or touch each other. Adding display:flex creates a row layout, and gap adds space (see steps 1 and 2).

💡 Always set display:flex and gap for horizontal spacing.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	main axis: row	Arranges children in a row or column	Layout containers
gap	1rem	between flex items	Fixed spacing between items	Consistent spacing
gap	calc(...) (fluid)	between flex items	Responsive spacing that changes with viewport	Fluid layouts

Concept Snapshot

Fluid spacing uses calc() with viewport units to create gaps that grow or shrink as the screen size changes. Set display:flex on the container to arrange items in a row. Use gap property with calc() combining rem and vw units for smooth spacing. This approach makes layouts responsive and visually balanced across devices.