Defining grid rows in Tailwind - Mini Project: Build & Apply

Defining Grid Rows with Tailwind CSS

📖 Scenario: You are creating a simple webpage layout that uses a grid to organize content in rows. You want to control how many rows the grid has and how tall each row is.

🎯 Goal: Build a grid container with exactly three rows using Tailwind CSS. Each row should have a specific height: the first row 4rem tall, the second row 6rem tall, and the third row 8rem tall.

📋 What You'll Learn

Use a div with Tailwind CSS classes to create a grid container.

Define exactly three rows in the grid using Tailwind's grid-rows-3 class.

Set custom row heights using Tailwind's grid-rows-[custom] syntax with exact heights: 4rem, 6rem, and 8rem.

Add three child div elements inside the grid container, each representing one row with distinct background colors for visibility.

💡 Why This Matters

🌍 Real World

Grid layouts are common in web design to organize content clearly and responsively. Knowing how to define rows helps create structured pages like dashboards, forms, or galleries.

💼 Career

Front-end developers often use CSS grids with Tailwind CSS to build flexible and maintainable layouts quickly. Understanding grid rows is essential for creating professional web interfaces.

1

Create the grid container with three child divs

Write the HTML code to create a div with the class grid. Inside it, add three child div elements. Each child div should contain the text Row 1, Row 2, and Row 3 respectively.

Tailwind

Hint

Use a div with class grid and add three child div elements with the exact texts.

2

Add the class to define exactly three grid rows

Add the Tailwind CSS class grid-rows-3 to the grid container div to define exactly three rows.

Tailwind

  Row 1
  Row 2
  Row 3

Hint

Add grid-rows-3 to the class attribute of the grid container.

3

Set custom row heights using Tailwind's arbitrary values

Modify the grid container div to use the Tailwind CSS class grid-rows-[4rem_6rem_8rem] to set the first row height to 4rem, the second to 6rem, and the third to 8rem.

Tailwind

  Row 1
  Row 2
  Row 3

Hint

Replace grid-rows-3 with grid-rows-[4rem_6rem_8rem] to set custom row heights.

4

Add background colors to each row for visibility

Add Tailwind CSS background color classes to each child div: bg-red-300 for Row 1, bg-green-300 for Row 2, and bg-blue-300 for Row 3.

Tailwind

  Row 1
  Row 2
  Row 3

Hint

Add the background color classes to each row's div for clear visual distinction.

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