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

Need a 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

Need a 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

Need a 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

Need a hint?

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