Grid container in CSS - Browser Rendering Trace

Render Flow - Grid container

Parse CSS

↓

Find selector: .container

↓

Apply display: grid

↓

Create grid formatting context

↓

Place children as grid items

↓

Calculate grid tracks

↓

Layout grid cells

↓

Paint grid and items

↓

Composite final image

The browser reads the CSS, finds the grid container, creates a grid formatting context, places children as grid items, calculates rows and columns, then paints and composites the final layout.

Render Steps - 4 Steps

Code Added:display: grid;

Before

[container]
  [Item 1]
  [Item 2]
  [Item 3]

→

After

[container: grid]
  [Item 1][Item 2][Item 3]

Setting display to grid turns the container into a grid layout, placing items into default grid cells in rows and columns.

🔧 Browser Action:Creates grid formatting context and treats children as grid items.

Code Sample

A container with three items arranged in two columns with a gap and border.

CSS

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

CSS

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 1rem;
  border: 2px solid #333;
  padding: 1rem;
}

Render Quiz - 3 Questions

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

A Both columns are the same width

B The first column is twice as wide as the second column

C The second column is twice as wide as the first column

D Columns have fixed pixel widths

Common Confusions - 3 Topics

Why do grid items not stretch to fill the container width?

By default, grid items stretch inside their cells, but the container width depends on grid-template-columns. If columns are narrow, items stay narrow. See step 2 where column widths are set.

💡 Set grid-template-columns to control container width distribution.

Why is there space between grid items even without margin?

The gap property adds space between grid cells, not margin on items. This is shown in step 3 where gap creates visible spacing.

💡 Use gap to add consistent spacing inside grid container.

Why does adding border and padding not change grid layout?

Border and padding affect container box size and appearance but do not change grid cell sizes or item placement. Step 4 shows border and padding added after layout.

💡 Borders and padding decorate container but grid layout is controlled by grid properties.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	grid	N/A	Turns container into grid layout	Create grid container
grid-template-columns	1fr 2fr	Horizontal	Defines column widths with fractions	Control column sizes
grid-template-rows	auto	Vertical	Defines row heights	Control row sizes
gap	1rem	Both	Adds space between rows and columns	Separate grid items visually
justify-items	stretch	Horizontal	Aligns items inside grid cells horizontally	Control item alignment
align-items	stretch	Vertical	Aligns items inside grid cells vertically	Control item alignment

Concept Snapshot

Grid container uses display: grid to create a grid layout. grid-template-columns sets column widths using fractions or fixed sizes. gap adds space between rows and columns. Grid items become grid cells arranged in rows and columns. Borders and padding decorate the container without changing grid layout.