Grid rows and columns in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What CSS property defines the number and size of columns in a grid?

The grid-template-columns property sets the number and size of columns in a CSS grid layout.

beginner

How do you set three rows each 100px tall in a CSS grid?

Use grid-template-rows: 100px 100px 100px; to create three rows each 100 pixels tall.

beginner

What does the CSS value 1fr mean in grid layouts?

1fr means one fraction of the available space. It divides space evenly among grid tracks.

intermediate

How can you create a grid with two columns: first 200px wide, second fills remaining space?

Use grid-template-columns: 200px 1fr;. The first column is fixed 200px, the second takes leftover space.

intermediate

What is the difference between grid-template-rows and grid-auto-rows?

grid-template-rows sets explicit row sizes you define. grid-auto-rows sets size for rows created automatically beyond those defined.

Which CSS property controls the height of grid rows?

A grid-template-rows

B grid-template-columns

C grid-row-gap

D grid-auto-columns

grid-template-rows sets the height of rows in a grid.

What does grid-template-columns: repeat(3, 1fr); do?

A Creates 3 rows each 1fr tall

B Creates 1 column repeated 3 times vertically

C Creates 3 columns each 1px wide

D Creates 3 columns each taking equal space

This creates 3 columns, each sharing equal fraction of available width.

If you want a grid row to be exactly 150 pixels tall, which value do you use?

A 150fr

B 150px

C auto

D 1fr

Using 150px sets a fixed height of 150 pixels.

Which property sets the size of rows created automatically beyond the defined rows?

A grid-row-gap

B grid-template-rows

C grid-auto-rows

D grid-template-columns

grid-auto-rows controls size of implicit rows added by the grid.

What does 1fr represent in grid sizing?

A One fraction of available space

B One fixed pixel

C One percentage

D One em unit

1fr means one fraction of the leftover space in the grid container.

Explain how to create a grid with 4 columns where the first two are 100px wide and the last two share the remaining space equally.

Think about mixing fixed sizes with fractional units.

Describe the difference between explicit and implicit grid rows and how CSS properties control their sizes.

Consider what happens when you add more content than defined rows.