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.

Practice

1. What does the Tailwind class grid-rows-3 do in a grid container?

easy

A. It creates 3 rows of equal height in the grid.

B. It creates 3 columns of equal width in the grid.

C. It sets the grid gap to 3 units.

D. It adds 3 pixels of padding to each grid item.

Solution

1. Step 1: Understand the class name

   The class grid-rows-3 specifies the number of rows in the grid layout.

2. Step 2: Effect on grid layout

   This class creates 3 rows of equal height automatically in the grid container.

3. Final Answer:

   It creates 3 rows of equal height in the grid. -> Option A

4. Quick Check:

   grid-rows-3 = 3 equal rows [OK]

Hint: grid-rows-{n} means n equal height rows [OK]

Common Mistakes:

• Confusing rows with columns
• Thinking it sets gaps or padding
• Assuming it sets custom heights

2. Which of these is the correct Tailwind syntax to define a grid with 4 rows?

easy

A. grid-rows4

B. grid-row-4

C. grid-rows-4

D. rows-grid-4

Solution

1. Step 1: Recall Tailwind grid row syntax

   The correct syntax uses grid-rows-{number} to define rows.

2. Step 2: Match options with syntax

   Only grid-rows-4 matches the correct pattern for 4 rows.

3. Final Answer:

   grid-rows-4 -> Option C

4. Quick Check:

   Correct syntax = grid-rows-{n} [OK]

Hint: Use grid-rows-{number} exactly for rows [OK]

Common Mistakes:

• Swapping 'row' and 'rows'
• Missing hyphens
• Incorrect word order

3. What will be the height of the rows in this Tailwind grid?

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

medium

A. Three rows with heights 200px, 100px, and automatic height.

B. Three rows all with equal height automatically.

C. Three rows with heights 100px, 100px, and 100px.

D. Three rows with heights 100px, 200px, and automatic height.

Solution

1. Step 1: Understand custom row heights syntax

   The class grid-rows-[100px_200px_auto] sets explicit heights for each row in order.

2. Step 2: Match heights to rows

   The first row is 100px, second is 200px, third is automatic height based on content.

3. Final Answer:

   Three rows with heights 100px, 200px, and automatic height. -> Option D

4. Quick Check:

   Custom grid-rows-[...] sets exact heights [OK]

Hint: Square brackets set exact row heights in order [OK]

Common Mistakes:

• Assuming all rows are equal height
• Mixing order of heights
• Confusing auto with fixed sizes

4. Identify the error in this Tailwind grid row definition:

<div class="grid grid-rows-[100px 200px auto]">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

medium

A. Missing underscores between row heights inside brackets.

B. Using square brackets is not allowed in Tailwind.

C. The grid class is missing.

D. The gap class is required with grid-rows.

Solution

1. Step 1: Check custom row heights syntax

   Custom heights inside square brackets must use underscores (_) to separate values, not spaces.

2. Step 2: Identify the error

   The code uses spaces instead of underscores between 100px, 200px, and auto, causing invalid syntax.

3. Final Answer:

   Missing underscores between row heights inside brackets. -> Option A

4. Quick Check:

   Use underscores in grid-rows-[...] [OK]

Hint: Use underscores, not spaces, inside square brackets [OK]

Common Mistakes:

• Using spaces instead of underscores
• Forgetting to add grid class
• Thinking gap is mandatory

5. You want a grid with 3 rows where the first row is 150px tall, the second row is twice as tall as the first, and the third row fills the remaining space. Which Tailwind class correctly defines these rows?

hard

A. grid-rows-[150px_150px_1fr]

B. grid-rows-[150px_300px_1fr]

C. grid-rows-[150px_2fr_auto]

D. grid-rows-[150px_300px_auto]

Solution

1. Step 1: Translate requirements to CSS grid units

   The first row is 150px, the second row twice that is 300px, and the third fills remaining space using fractional unit.

2. Step 2: Match Tailwind syntax

   Tailwind allows custom row heights with grid-rows-[...] using underscores. The third row uses 1fr to fill leftover space.

3. Step 3: Check options

   grid-rows-[150px_300px_1fr] matches exactly: 150px_300px_1fr. grid-rows-[150px_300px_auto] uses auto which doesn't fill remaining space. grid-rows-[150px_2fr_auto] uses 2fr incorrectly for second row. grid-rows-[150px_150px_1fr] has equal second row height.

4. Final Answer:

   grid-rows-[150px_300px_1fr] -> Option B

5. Quick Check:

   Use fixed px and fr units for flexible rows [OK]

Hint: Use px for fixed, fr for flexible row heights [OK]

Common Mistakes:

• Using auto instead of fr for flexible space
• Wrong units for double height
• Mixing fr and px incorrectly