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.

Practice

1. What CSS property do you use to make an element a grid container?

easy

A. grid-template-columns: auto;

B. display: flex;

C. position: grid;

D. display: grid;

Solution

1. Step 1: Understand grid container basics

   To create a grid layout, the container must have display: grid; set.

2. Step 2: Check other options

   display: flex; creates a flexbox, not grid. position: grid; is invalid. grid-template-columns defines columns but does not make container a grid.

3. Final Answer:

   display: grid; -> Option D

4. Quick Check:

   Grid container = display: grid; [OK]

Hint: Grid container always needs display: grid; [OK]

Common Mistakes:

• Using display: flex; instead of grid
• Trying to use position: grid;
• Setting grid-template-columns without display: grid;

2. Which of the following is the correct syntax to create a grid with 3 equal columns?

easy

A. grid-template-columns: 1fr 1fr 1fr;

B. grid-template-columns: 3px;

C. grid-columns: repeat(3, 1fr);

D. grid-template-rows: 1fr 1fr 1fr;

Solution

1. Step 1: Understand grid-template-columns syntax

   The property grid-template-columns defines columns. Using 1fr 1fr 1fr creates 3 equal columns.

2. Step 2: Check other options

   3px is a fixed small width, not equal columns. grid-columns is invalid property. grid-template-rows sets rows, not columns.

3. Final Answer:

   grid-template-columns: 1fr 1fr 1fr; -> Option A

4. Quick Check:

   Equal columns = grid-template-columns: 1fr 1fr 1fr; [OK]

Hint: Use grid-template-columns with 1fr units for equal columns [OK]

Common Mistakes:

• Using grid-columns instead of grid-template-columns
• Confusing rows and columns properties
• Using fixed px values for equal flexible columns

3. Given this CSS:

 .container {
  display: grid;
  grid-template-columns: 100px 200px;
  grid-template-rows: 50px 50px;
}

How many grid cells are created inside .container?

medium

A. 4

B. 2

C. 6

D. 8

Solution

1. Step 1: Calculate columns and rows

   There are 2 columns (100px and 200px) and 2 rows (50px and 50px).

2. Step 2: Multiply columns by rows

   Total grid cells = 2 columns x 2 rows = 4 cells.

3. Final Answer:

   4 -> Option A

4. Quick Check:

   2 columns x 2 rows = 4 cells [OK]

Hint: Multiply number of columns by rows for total grid cells [OK]

Common Mistakes:

• Adding columns and rows instead of multiplying
• Counting only columns or only rows
• Confusing grid cells with grid lines

4. What is wrong with this CSS if the goal is to create a grid container with 3 equal columns?

 .grid {
  display: grid;
  grid-template-columns: repeat(3);
}

medium

A. display: grid; is missing

B. Missing unit for repeat count

C. repeat() requires two arguments: count and size

D. grid-template-columns cannot use repeat()

Solution

1. Step 1: Check repeat() syntax

   The repeat() function needs two arguments: number of times and size, e.g. repeat(3, 1fr).

2. Step 2: Identify the error

   Here, only repeat(3) is given, missing the size argument, so it's invalid.

3. Final Answer:

   repeat() requires two arguments: count and size -> Option C

4. Quick Check:

   repeat() needs count and size [OK]

Hint: repeat() always needs count and size, like repeat(3, 1fr) [OK]

Common Mistakes:

• Using repeat() with only one argument
• Forgetting to specify display: grid;
• Thinking repeat() is invalid in grid-template-columns

5. You want a grid container that has 2 columns: the first column is 150px wide, and the second column fills the remaining space. Which CSS is correct?

hard

A. display: grid; grid-template-columns: 150px auto;

B. display: grid; grid-template-columns: 150px 1fr;

C. display: grid; grid-template-columns: auto 150px;

D. display: grid; grid-template-columns: 1fr 150px;

Solution

1. Step 1: Understand fixed and flexible columns

   150px is fixed width. To fill remaining space, use 1fr which means flexible fraction.

2. Step 2: Check options

   display: grid; grid-template-columns: 150px auto; uses auto which sizes based on content, not remaining space. Options B and D put 150px in wrong column order.

3. Final Answer:

   display: grid; grid-template-columns: 150px 1fr; -> Option B

4. Quick Check:

   Fixed + flexible = 150px 1fr [OK]

Hint: Use 1fr for flexible space after fixed width [OK]

Common Mistakes:

• Using auto instead of 1fr for flexible space
• Swapping column order
• Not setting display: grid;