Grid system mixin from scratch in SASS - Browser Rendering Trace

Render Flow - Grid system mixin from scratch

[Read @mixin grid] -> [Parse parameters] -> [Generate CSS grid properties] -> [Apply to container] -> [Render grid layout] -> [Place grid items]

The browser reads the Sass mixin, compiles it into CSS with grid properties, applies these styles to the container, then calculates and renders the grid layout placing items accordingly.

Render Steps - 4 Steps

Code Added:display: grid;

Before

[container]
  [item 1]
  [item 2]
  [item 3]
  [item 4]

→

After

[container: grid]
  [item 1]
  [item 2]
  [item 3]
  [item 4]

Setting display to grid changes the container to a grid layout, placing items in a single column using implicit grid tracks by default.

🔧 Browser Action:Creates grid formatting context, triggers layout recalculation

Code Sample

This code creates a 4-column grid container with gaps between items, styling each item with background color and padding.

SASS

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

SASS

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

.container {
  @include grid(4, 1rem);
  padding: 1rem;
  background-color: #f0f0f0;
}

.item {
  background-color: #4a90e2;
  color: white;
  padding: 1rem;
  text-align: center;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

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

A In 4 equal columns in a single row

B Stacked vertically in one column

C Randomly placed overlapping each other

D In 2 columns and 2 rows

Common Confusions - 3 Topics

Why do grid items stretch to fill the column width?

By default, grid items stretch to fill their grid area horizontally and vertically unless you change align-items or justify-items.

💡 Grid items fill their grid cells unless alignment properties override.

Why is there no space between rows if I only set gap horizontally?

The gap property sets both row and column gaps unless you specify row-gap and column-gap separately.

💡 Use gap for both directions or row-gap/column-gap for specific control.

Why doesn't my grid container shrink smaller than its content?

Grid containers by default expand to fit content and grid tracks; use max-width or width to control container size.

💡 Control container size explicitly to prevent unwanted expansion.

Property Reference

Property	Value Applied	Visual Effect	Common Use
display	grid	Creates grid container, enables grid layout	Layout container for grid items
grid-template-columns	repeat(4, 1fr)	Defines 4 equal columns	Set number and size of columns
gap	1rem	Adds space between grid items	Control spacing between items
padding	1rem (on items)	Adds space inside items	Improve readability and spacing
background-color	#4a90e2 (items)	Colors items for visibility	Visual distinction of items
border-radius	0.5rem (items)	Rounds corners of items	Aesthetic styling

Concept Snapshot

Grid system mixin creates a grid container with columns and gaps. Key properties: display: grid, grid-template-columns, gap. Items automatically fill grid cells evenly. Gaps add space between items horizontally and vertically. Styling items improves visual clarity. Use mixins to reuse grid setups easily.