Grid item placement in CSS - Browser Rendering Trace

Render Flow - Grid item placement

Parse CSS Grid container

↓

Identify grid-template-columns and rows

↓

Create grid lines and cells

↓

Place grid items by default in order

↓

Apply grid-column-start/end and grid-row-start/end

↓

Calculate item size and position

↓

Paint grid and items

↓

Composite final layout

The browser reads the grid container styles, creates the grid structure, then places each grid item according to default flow or explicit placement properties before painting the final layout.

Render Steps - 4 Steps

Code Added:display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px;

Before

[ ]
[ ]
[ ]

→

After

[___][___][___]
[___][___][___]

The container becomes a grid with 3 columns and 2 rows, each cell 100px square, forming a visible grid structure.

🔧 Browser Action:Creates grid formatting context and calculates grid tracks

Code Sample

A 3-column by 2-row grid with three items placed explicitly in different grid cells and spanning columns or rows.

CSS

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

CSS

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}
.item1 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
}
.item2 {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}
.item3 {
  grid-column: 3 / 4;
  grid-row: 2 / 3;
}

Render Quiz - 3 Questions

After applying step 2, where is item 1 placed in the grid?

A Spanning columns 1 to 2 on row 2

B In column 1, spanning rows 1 to 3

C Spanning columns 2 to 4 on row 1

D In column 3, row 2

Common Confusions - 2 Topics

Why does my grid item overlap others when I set grid-column-start and grid-column-end?

If you place an item to span columns or rows that other items also occupy, they visually overlap because grid allows overlapping unless you avoid it by careful placement or using auto-flow.

💡 Check grid line numbers and spans to avoid overlapping areas (see render_steps 2 and 3).

Why does my grid item not move when I change grid-column but not grid-row?

Grid placement requires both row and column positions; if you only change column, the row stays where it was, so the item moves horizontally but stays vertically fixed.

💡 Always specify both grid-row and grid-column for full control (see render_steps 2 and 3).

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Creates grid container and grid formatting context	Defines grid layout
grid-template-columns	100px 100px 100px	Horizontal	Defines 3 columns each 100px wide	Sets grid columns size
grid-template-rows	100px 100px	Vertical	Defines 2 rows each 100px tall	Sets grid rows size
grid-column-start	2	Horizontal	Starts item at second vertical grid line	Positions item horizontally
grid-column-end	4	Horizontal	Ends item at fourth vertical grid line, spanning 2 columns	Defines horizontal span
grid-row-start	1	Vertical	Starts item at first horizontal grid line	Positions item vertically
grid-row-end	2	Vertical	Ends item at second horizontal grid line, spanning 1 row	Defines vertical span
grid-column	1 / 2	Horizontal	Shorthand for start/end columns	Quick horizontal placement
grid-row	1 / 3	Vertical	Shorthand for start/end rows spanning 2 rows	Quick vertical placement

Concept Snapshot

Grid item placement uses grid-column-start/end and grid-row-start/end to position items. Grid lines define the boundaries for placement. Items can span multiple columns or rows. Default placement flows items in order if no explicit placement. Grid container must have display: grid to activate grid layout.