Why custom grids offer control in SASS - Browser Rendering Impact

Render Flow - Why custom grids offer control

[Write SASS variables and mixins] -> [Compile to CSS grid properties] -> [Browser parses CSS grid rules] -> [Browser creates grid container and grid items] -> [Browser calculates grid tracks and gaps] -> [Browser places items according to grid-template-areas or lines] -> [Browser paints final grid layout]

The browser reads the compiled CSS grid properties from SASS, calculates the grid structure, and places items precisely, giving developers fine control over layout.

Render Steps - 5 Steps

Code Added:display: grid;

Before

[grid-container]
  [item1]
  [item2]
  [item3]
  [item4]

→

After

[grid-container: grid]
  [item1]
  [item2]
  [item3]
  [item4]

Setting display to grid turns the container into a grid layout, but no columns defined yet, so items stack in one column.

🔧 Browser Action:Creates grid formatting context and prepares grid container

Code Sample

A grid with 3 equal columns and gaps, where item1 spans two columns and item4 spans two columns, showing custom control over item placement.

SASS

<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

SASS

$columns: 3;
$gap: 1rem;

.grid-container {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
}

.item1 { grid-column: 1 / 3; }
.item4 { grid-column: 2 / 4; }

Render Quiz - 3 Questions

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

A Items overlapping in one cell

B One column with items stacked vertically

C Three equal columns with items filling left to right

D Items spaced with gaps but no columns

Common Confusions - 3 Topics

Why does item1 stretch across two columns but item2 stays in one?

Because item1 has grid-column: 1 / 3, it spans two columns. Item2 has no span, so it stays in one column. (See render_step 4)

💡 Grid items span columns only if grid-column is set; otherwise, they occupy one column.

Why is there space between items after adding gap?

The gap property adds fixed spacing between columns and rows, separating items visually. (See render_step 3)

💡 Use gap to add consistent spacing inside grid containers.

Why does item4 appear shifted to the right and span two columns?

Because item4 has grid-column: 2 / 4, it starts at column 2 and spans to column 4, occupying two columns on the second row. (See render_step 5)

💡 Grid-column controls horizontal placement and span of grid items.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Creates grid container for layout	Enable grid layout
grid-template-columns	repeat(3, 1fr)	Horizontal	Defines 3 equal columns	Set column structure
gap	1rem	Both	Adds space between rows and columns	Control spacing
grid-column	1 / 3	Horizontal	Item spans from column 1 to 3	Control item width and position
grid-column	2 / 4	Horizontal	Item spans from column 2 to 4	Control item width and position

Concept Snapshot

Custom grids use CSS grid properties like grid-template-columns and grid-column to control layout. The display: grid property creates a grid container. Gap adds spacing between grid cells. Grid-column controls how many columns an item spans and where it starts. This gives precise control over item placement and sizing.