Grid rows and columns in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the number of columns in this grid?

Consider the CSS below. How many columns will the grid container have?

CSS

display: grid;
grid-template-columns: repeat(3, 1fr);

A 3

B 2

C 1

D 4

💡 Hint

The repeat function sets how many columns are created.

The property grid-template-columns: repeat(3, 1fr) creates 3 equal columns.

📝 Syntax

intermediate

Which option correctly defines 2 rows with different heights?

You want a grid with two rows: the first row 100px tall and the second row 200px tall. Which CSS is correct?

A grid-rows: 100px 200px;

B grid-rows-template: 100px, 200px;

C grid-template-rows: 100px, 200px;

D grid-template-rows: 100px 200px;

💡 Hint

The property name is grid-template-rows and values are space-separated without commas.

The correct syntax is grid-template-rows: 100px 200px; Commas are not used and the property name must be exact.

❓ rendering

advanced

What will be the height of the second row?

Given this CSS, what is the height of the second row in the grid container?

CSS

display: grid;
grid-template-rows: 100px auto 50px;

A 100px

B 50px

C auto

D 150px

💡 Hint

The second value in grid-template-rows sets the second row height.

The second row height is set to auto, which means it adjusts to the content height.

❓ selector

advanced

Which CSS selector targets the second column in a grid?

You want to style all items in the second column of a grid container. Which selector will do this?

A .grid-container > :nth-child(2)

B .grid-container > :nth-child(3n+2)

C .grid-container > :nth-child(4n+2)

D .grid-container > :nth-child(2n)

💡 Hint

Grid items are placed row-wise. Use a formula to select every item in the second column.

In a grid with 3 columns, items in the second column are every 3rd item starting at index 2: nth-child(3n+2).

❓ accessibility

expert

How to make a grid accessible for screen readers?

Which practice improves accessibility for a grid layout used as a data table?

A Use semantic <table>, <thead>, <tbody>, and <th> elements instead of divs with CSS grid.

B Add role="grid" to the container and use divs for all cells.

C Use aria-label on each grid cell and no semantic elements.

D Use only CSS grid with no ARIA roles or semantic tags.

💡 Hint

Semantic HTML elements help screen readers understand data tables better than ARIA alone.

Using semantic table elements provides built-in accessibility and keyboard navigation support for data grids.