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.

Practice

1. What does the CSS property grid-column: 2 / 4; do in a grid container?

easy

A. It places the grid item starting at column line 2 and ending before column line 4.

B. It places the grid item in columns 2 and 4 only, skipping column 3.

C. It spans the grid item across 4 columns starting from column 2.

D. It places the grid item only in column 2.

Solution

1. Step 1: Understand grid-column syntax

   The syntax grid-column: start / end; means the item starts at the start line and ends before the end line.

2. Step 2: Apply to given values

   Here, start is 2 and end is 4, so the item covers columns 2 and 3 (lines 2 to 4).

3. Final Answer:

   It places the grid item starting at column line 2 and ending before column line 4. -> Option A

4. Quick Check:

   grid-column: 2 / 4 means columns 2 to 3 [OK]

Hint: Remember: start line to end line excludes the end line itself [OK]

Common Mistakes:

• Thinking it includes the end line column
• Confusing span count with line numbers
• Assuming it skips columns between start and end

2. Which of the following is the correct syntax to make a grid item span 3 rows starting from row line 1?

easy

A. grid-row: 1 / span 3;

B. grid-row: span 3 / 1;

C. grid-row: 3 / 1;

D. grid-row: 1 - 3;

Solution

1. Step 1: Recall grid-row span syntax

   The correct syntax to span rows is grid-row: start / span number;.

2. Step 2: Match with options

   grid-row: 1 / span 3; uses 1 / span 3, meaning start at line 1 and span 3 rows down.

3. Final Answer:

   grid-row: 1 / span 3; -> Option A

4. Quick Check:

   Start line then span count is correct [OK]

Hint: Use 'start / span count' to span grid lines correctly [OK]

Common Mistakes:

• Reversing start and span values
• Using dash instead of slash
• Placing span before start line

3. Given the CSS below, where will the grid item appear?

grid-template-columns: repeat(4, 1fr);
grid-template-rows: 100px 100px;
.item {
  grid-column: 3 / 5;
  grid-row: 1 / 2;
}

medium

A. The item spans columns 1 to 3 on the first row.

B. The item spans columns 3 and 4 on the second row.

C. The item spans columns 3 and 4 on the first row.

D. The item spans columns 2 to 4 on the first row.

Solution

1. Step 1: Analyze grid-column placement

   The item starts at column line 3 and ends before line 5, so it covers columns 3 and 4.

2. Step 2: Analyze grid-row placement

   The item starts at row line 1 and ends before line 2, so it is on the first row only.

3. Final Answer:

   The item spans columns 3 and 4 on the first row. -> Option C

4. Quick Check:

   grid-column: 3 / 5 and grid-row: 1 / 2 means columns 3-4, row 1 [OK]

Hint: Start line to end line covers all lines in between [OK]

Common Mistakes:

• Confusing row numbers with column numbers
• Assuming end line is included
• Mixing up first and second row

4. Identify the error in this CSS for placing a grid item:

.box {
  grid-column: span 2 / 4;
  grid-row: 1 / span 3;
}

medium

A. There is no error; the code is correct.

B. grid-row cannot use span with a start line.

C. grid-column must use only numbers, not span.

D. The order of values in grid-column is incorrect; span should come second.

Solution

1. Step 1: Check grid-column syntax

   The correct syntax is start / end or start / span count. Here, span 2 / 4 is reversed; span should be second.

2. Step 2: Check grid-row syntax

   grid-row: 1 / span 3; is correct syntax to start at line 1 and span 3 rows.

3. Final Answer:

   The order of values in grid-column is incorrect; span should come second. -> Option D

4. Quick Check:

   Span always follows start line [OK]

Hint: Start line first, then span count in grid placement [OK]

Common Mistakes:

• Placing span before start line
• Mixing up grid-column and grid-row syntax
• Assuming span can be first value

5. You want a grid item to start at column 2 and span 3 columns, but your grid has only 4 columns total. Which CSS is correct and will not cause layout issues?

hard

A. grid-column: 2 / 6;

B. grid-column: 2 / span 3;

C. grid-column: 2 / 4;

D. grid-column: span 3 / 2;

Solution

1. Step 1: Understand grid size and placement

   The grid has 4 columns, so column lines go from 1 to 5 (one more than columns).

2. Step 2: Check each option

   • A: grid-column: 2 / 6; tries to end at line 6, outside explicit grid (may create implicit tracks).
   • B: grid-column: 2 / 4; ends at line 4, spans columns 2-3 only (2 columns).
   • C: grid-column: 2 / span 3; starts at line 2, spans 3 columns to line 5, fits perfectly.
   • D: grid-column: span 3 / 2; has incorrect syntax (span cannot precede start).

3. Final Answer:

   grid-column: 2 / span 3; -> Option B

4. Quick Check:

   Start line then span within grid limits [OK]

Hint: Use 'start / span count' to stay inside grid boundaries [OK]

Common Mistakes:

• Using end line beyond grid size
• Reversing span and start line
• Assuming grid lines equal columns