Grid rows and columns in CSS - Browser Rendering Trace

Render Flow - Grid rows and columns

Parse CSS Grid container

↓

Identify grid-template-rows and grid-template-columns

↓

Calculate track sizes

↓

Create grid lines and cells

↓

Place grid items into cells

↓

Calculate layout positions

↓

Paint grid and items

↓

Composite final render

The browser reads the grid container styles, calculates the sizes of rows and columns, creates the grid structure, places items, and then paints the layout on screen.

Render Steps - 4 Steps

Code Added:display: grid;

Before

[grid-container]
  [Item 1]
  [Item 2]
  [Item 3]
  [Item 4]

→

After

[grid-container]
  [Item 1][Item 2]
  [Item 3][Item 4]

Setting display to grid creates a grid container. Items automatically become grid items and arrange in rows and columns.

🔧 Browser Action:Creates grid formatting context and grid items

Code Sample

A grid container with 2 columns (100px and 200px) and 2 rows (50px and 150px), showing 4 items placed in the grid cells with spacing.

CSS

<div class="grid-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
</div>

CSS

.grid-container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 150px;
  gap: 10px;
  background-color: #eee;
}
.grid-container > div {
  background-color: #8fa;
  border: 1px solid #484;
  display: flex;
  align-items: center;
  justify-content: center;
}

Render Quiz - 3 Questions

After applying step 2, how are the grid columns sized?

A First column 100px wide, second column 200px wide

B Both columns 150px wide

C Columns automatically sized by content

D Columns have equal width filling container

Common Confusions - 3 Topics

Why do grid items not stretch to fill the entire grid cell?

By default, grid items stretch to fill cells, but if you set fixed sizes or use align-self/justify-self properties, items may not stretch fully. Also, if the item content size is smaller and no stretching is applied, it may look smaller.

💡 Check if align-items or justify-items are set; default is stretch.

Why is there extra space between grid items even without gap?

Without gap, grid cells touch each other. Extra space might come from margin or padding on grid items or container, not from grid itself.

💡 Inspect margins and paddings on items and container.

Why does the grid container not show the expected number of rows or columns?

If you define fewer rows or columns than items, grid auto-places items creating implicit tracks. These tracks have default sizes, which may differ from explicit tracks.

💡 Explicit tracks set sizes; implicit tracks use default sizing.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
grid-template-columns	100px 200px	Horizontal (columns)	Defines fixed widths for each column	Set column sizes explicitly
grid-template-rows	50px 150px	Vertical (rows)	Defines fixed heights for each row	Set row sizes explicitly
gap	10px	Both axes	Adds spacing between rows and columns	Separate grid cells visually
display	grid	N/A	Creates grid container and grid items	Enable grid layout

Concept Snapshot

Grid layout uses display: grid to create a grid container. grid-template-columns sets column widths; grid-template-rows sets row heights. Grid items automatically place into grid cells. Gap adds spacing between rows and columns. Explicit tracks have fixed sizes; implicit tracks fill remaining space.