Why grid is needed in CSS - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why use CSS Grid for layout?

Which of the following best explains why CSS Grid is needed for web layouts?

A It removes the need for any CSS styling on a webpage.

B It allows placing items in rows and columns easily, making complex layouts simpler.

C It replaces HTML tags with new ones for better structure.

D It automatically changes all text colors based on screen size.

💡 Hint

Think about how you arrange things on a table with rows and columns.

CSS Grid helps arrange webpage elements in rows and columns, making complex layouts easier to build and maintain.

📝 Syntax

intermediate

Identify the correct CSS Grid syntax

Which CSS code correctly creates a grid container with 3 equal columns?

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

B display: flex; grid-columns: 3;

C display: block; columns: 3;

D display: grid; grid-template-columns: 1fr 1fr 1fr;

💡 Hint

Look for the property that defines columns inside a grid container.

The grid-template-columns property defines the number and size of columns in a grid. Using 1fr 1fr 1fr creates three equal columns.

❓ layout

advanced

What will be the layout result of this CSS Grid code?

Given this CSS, how will the items be arranged visually?

CSS

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

A Two columns: first 100px wide, second 200px wide; two rows each 50px tall; 10px gap between items.

B Three columns each 100px wide; one row 100px tall; 10px gap between items.

C One column 300px wide with four rows each 50px tall; no gaps.

D Grid items stacked vertically with no columns or rows defined.

💡 Hint

Check the sizes defined for columns and rows and the gap between them.

The code defines a grid with two columns (100px and 200px wide) and two rows (each 50px tall). The gap adds space between grid items.

❓ accessibility

advanced

How does CSS Grid improve accessibility?

Which statement best describes how CSS Grid can help make web pages more accessible?

A It allows logical reading order by controlling visual layout without changing HTML order.

B It automatically adds alt text to images in the grid.

C It disables keyboard navigation to prevent confusion.

D It changes font sizes based on user preferences without extra code.

💡 Hint

Think about how screen readers read content in the order it appears in HTML.

CSS Grid lets developers arrange items visually without changing the HTML order, preserving logical reading order for screen readers and keyboard users.

❓ selector

expert

Which CSS selector targets all direct grid items inside a container?

Given a grid container with class grid-container, which selector correctly selects only its direct grid items?

A .grid-container .grid-item

B .grid-container *

C .grid-container > *

D .grid-container + *

💡 Hint

Look for the selector that selects only immediate children.

The > combinator selects only direct children of the container, which are the grid items.