Defining grid rows in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the effect of this Tailwind CSS class?

Consider the following HTML snippet using Tailwind CSS:

<div class="grid grid-rows-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

What does the grid-rows-3 class do in this example?

Tailwind

<div class="grid grid-rows-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

A It creates a grid container with exactly 3 rows, placing each item in its own row.

B It creates a grid container with 3 columns, placing items horizontally.

C It adds a 3px gap between rows in the grid.

D It limits the grid to 3 items total, regardless of content.

💡 Hint

Think about how grid rows and columns control layout direction.

The grid-rows-3 class sets the grid to have exactly 3 rows. Each child element is placed in a separate row vertically. It does not affect columns or gaps.

🧠 Conceptual

intermediate

How many rows are created by this Tailwind class?

If you use the class grid-rows-4 on a grid container with 6 child elements, how many rows will the grid have?

A 4 rows, with some rows containing multiple items.

B 6 rows, one for each child element.

C 1 row, all items placed horizontally.

D It will cause a layout error because 6 items don't fit in 4 rows.

💡 Hint

Without specifying grid-cols, the grid uses a single implicit column.

The grid-rows-4 class creates 4 explicit rows. Since there are 6 items and no columns defined, the grid creates additional implicit rows, resulting in 6 rows, one for each child element.

❓ rendering

advanced

What visual layout results from this Tailwind grid?

Given this HTML:

<div class="grid grid-rows-[100px_200px_1fr] gap-2">
  <div class="bg-blue-300">Row 1</div>
  <div class="bg-green-300">Row 2</div>
  <div class="bg-red-300">Row 3</div>
</div>

What will be the height of each row visually?

Tailwind

<div class="grid grid-rows-[100px_200px_1fr] gap-2">
  <div class="bg-blue-300">Row 1</div>
  <div class="bg-green-300">Row 2</div>
  <div class="bg-red-300">Row 3</div>
</div>

A Row heights are ignored and all rows collapse to zero height.

B Row 1 is 100px tall, Row 2 is 200px tall, Row 3 takes remaining space.

C Row 1 and Row 2 have auto height, Row 3 is 100px tall.

D All rows have equal height because of the grid layout.

💡 Hint

Custom row sizes in Tailwind use square brackets with CSS values.

The grid-rows-[100px_200px_1fr] class sets the first row to 100px height, second to 200px, and the third row to 1fr, which fills remaining space.

❓ selector

advanced

Which Tailwind class sets exactly 5 grid rows?

You want to create a grid with exactly 5 rows. Which Tailwind CSS class should you use?

A rows-5

B grid-cols-5

C grid-rows-5

D grid-row-5

💡 Hint

Tailwind uses the prefix grid-rows- to define number of rows.

The correct class to define 5 rows in a grid is grid-rows-5. Other options are invalid or define columns.

❓ accessibility

expert

How to make a grid with rows accessible for screen readers?

You have a grid with multiple rows defined by Tailwind classes. What is the best way to ensure screen readers understand the row structure?

A Use only Tailwind classes; screen readers automatically detect grid rows.

B Add <code>tabindex="-1"</code> to each grid item to make rows focusable.

C Add <code>aria-rowcount</code> attribute to the grid container with the number of rows.

D Use semantic HTML elements like <code>&lt;section&gt;</code> or <code>&lt;article&gt;</code> inside each grid row and add ARIA roles if needed.

💡 Hint

Think about semantic HTML and ARIA roles for structure.

Screen readers rely on semantic HTML and ARIA roles to understand structure. Wrapping row content in semantic elements and adding roles improves accessibility. Tailwind classes alone do not provide semantic meaning.