Grid container in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the number of columns in this grid container?

Consider the following CSS code for a grid container. How many columns will the grid have?

CSS

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

A 1

B 2

C 3

D 4

💡 Hint

The repeat function sets how many columns are created.

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

❓ selector

intermediate

Which CSS property makes an element a grid container?

You want to turn a

into a grid container. Which CSS property and value should you use?

A display: flex;

B display: block;

C position: grid;

D display: grid;

💡 Hint

The display property controls the layout type of an element.

Setting display: grid; makes the element a grid container, enabling grid layout for its children.

❓ rendering

advanced

What will be the width of each column in this grid container?

Given this CSS, what is the width of each column if the container is 600px wide?

CSS

display: grid;
grid-template-columns: 100px 2fr 1fr;

A 100px, 333.33px, 166.67px

B 100px, 200px, 300px

C 100px, 400px, 100px

D 100px, 250px, 250px

💡 Hint

fr units divide remaining space proportionally after fixed widths.

The first column is fixed 100px. Remaining space is 500px (600-100). 2fr + 1fr = 3fr total. So 2fr = 2/3 * 500 = 333.33px, 1fr = 1/3 * 500 = 166.67px.

❓ accessibility

advanced

Which practice improves accessibility for grid containers?

When using CSS grid for layout, which practice helps screen reader users understand the page structure better?

A Use semantic HTML elements inside the grid container.

B Add tabindex="-1" to all grid items.

C Use only div elements with no ARIA roles.

D Avoid using grid-template-areas.

💡 Hint

Screen readers rely on meaningful HTML tags.

Using semantic elements like

,

,

inside grid containers helps screen readers understand content roles and structure.

🧠 Conceptual

expert

What happens if you set grid-template-columns: auto auto auto; on a grid container with three items of different content widths?

Consider a grid container with three items. The CSS is: grid-template-columns: auto auto auto; What will be the width of each column?

A All columns have equal width regardless of content.

B Each column width matches the widest content in that column.

C Columns shrink to zero width if content is small.

D Columns ignore content size and fill container equally.

💡 Hint

The auto keyword sizes columns based on content.

Using auto for columns means each column's width fits its widest content, so columns can have different widths.