Grid container activation in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does grid class do in Tailwind CSS?

In Tailwind CSS, what is the main effect of adding the grid class to a container element?

A It activates CSS Grid layout on the container, enabling grid-specific properties.

B It applies Flexbox layout to the container, arranging children in a row.

C It hides the container and its children from the page.

D It adds a border and padding to the container.

💡 Hint

Think about what CSS property the grid class sets.

The grid class in Tailwind sets display: grid; on the element. This activates the CSS Grid layout, allowing you to use grid-specific properties like grid-template-columns and gap.

📝 Syntax

intermediate

Which Tailwind class activates grid layout correctly?

You want to make a container use CSS Grid in Tailwind. Which class should you add?

A flex-grid

B grid

C grid-container

D grid-layout

💡 Hint

Tailwind uses short, simple class names for display types.

The correct Tailwind class to activate grid layout is grid. Other options are not valid Tailwind classes.

❓ selector

advanced

Which Tailwind class sets a 3-column grid layout?

You have a container with the grid class. Which class sets exactly 3 equal columns?

A cols-3

B grid-3-cols

C grid-cols-3

D columns-3

💡 Hint

Tailwind uses grid-cols- prefix for column count.

The class grid-cols-3 sets grid-template-columns: repeat(3, minmax(0, 1fr)); which creates 3 equal columns.

❓ rendering

advanced

What will the layout look like with these classes?

Given this HTML:

<div class="grid grid-cols-2 gap-4">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

How will the boxes be arranged visually?

Tailwind

<div class="grid grid-cols-2 gap-4">
  <div>Box 1</div>
  <div>Box 2</div>
  <div>Box 3</div>
</div>

A Boxes overlapping each other in the same position.

B Three columns in one row with all boxes side by side.

C One column with all boxes stacked vertically.

D Two columns with Box 1 and Box 2 in the first row, Box 3 alone in the second row.

💡 Hint

Think about how 3 items fit into 2 columns.

The grid-cols-2 creates 2 columns. The 3 boxes fill the first row with 2 boxes, and the third box goes to the next row alone.

❓ accessibility

expert

How to make a grid container accessible for screen readers?

You have a grid container with multiple items. Which practice improves accessibility for screen readers?

A Use semantic HTML elements inside the grid and add <code>aria-label</code> or <code>aria-labelledby</code> to describe the grid region.

B Add <code>tabindex="-1"</code> to the grid container to prevent keyboard focus.

C Use only <code>div</code> elements without any labels or roles inside the grid.

D Set the grid container's CSS <code>visibility</code> to hidden to avoid confusion.

💡 Hint

Think about how screen readers understand page structure.

Using semantic elements and descriptive ARIA labels helps screen readers understand the grid's purpose and content. Avoid hiding or removing focus from important content.