Grid gap in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does the gap property do in CSS Grid?

In a CSS Grid layout, what is the main purpose of the gap property?

A It defines the size of each grid item.

B It sets the space between grid items both in rows and columns.

C It controls the padding inside each grid item.

D It changes the background color of the grid container.

💡 Hint

Think about the space you see between boxes in a grid layout.

The gap property adds space between grid items horizontally and vertically, making the layout clearer and less crowded.

📝 Syntax

intermediate

Which CSS code correctly sets a 20px gap between grid items?

You want to add a 20px gap between all grid items in a container. Which CSS snippet does this correctly?

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* gap here */
}

A gap: 20px;

B grid-gap: 20px 20px 20px;

C gap: 20px 20px;

D gap: 20px 20px 20px 20px;

💡 Hint

The gap property accepts one or two values for rows and columns.

The gap property accepts one or two values. One value sets both row and column gaps equally. Multiple values like three or four are invalid.

❓ rendering

advanced

What visual difference does gap: 10px 30px; create in a grid?

Given a grid container with gap: 10px 30px;, what will you see?

CSS

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 30px;
}

A 10px space around the entire grid container.

B 30px vertical space between rows and 10px horizontal space between columns.

C 10px vertical space between rows and 30px horizontal space between columns.

D No space between grid items.

💡 Hint

Remember the order of values in gap: first is row gap, second is column gap.

The first value in gap sets the row gap (vertical space), and the second sets the column gap (horizontal space).

❓ selector

advanced

Which CSS selector targets the gap between grid items?

You want to style the space between grid items using CSS. Which selector or property affects this space?

A The <code>gap</code> property on the grid container.

B The <code>:gap</code> pseudo-class on grid items.

C The <code>margin</code> property on grid items.

D The <code>padding</code> property on the grid container.

💡 Hint

Think about which CSS property controls spacing between grid cells.

The gap property on the grid container controls the spacing between grid items. There is no :gap pseudo-class.

❓ accessibility

expert

How does using gap improve accessibility in grid layouts?

Why is it better for accessibility to use the CSS gap property instead of adding margins to grid items?

A Because margins increase the font size of grid items.

B Because margins cause grid items to be skipped by screen readers.

C Because <code>gap</code> automatically adds ARIA labels to grid items.

D Because <code>gap</code> maintains consistent spacing without affecting keyboard navigation or screen reader order.

💡 Hint

Think about how spacing affects focus and reading order.

Using gap keeps spacing purely visual and does not change the DOM or focus order, which helps screen readers and keyboard users navigate predictably.