Defining grid rows in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a grid container with three rows.

Tailwind

<div class="grid [1]">
  <div>Row 1</div>
  <div>Row 2</div>
  <div>Row 3</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid-rows-3

Bgrid-cols-3

Cgrid-flow-row

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-3 which sets columns instead of rows.

Using flow classes like grid-flow-col which control flow direction.

The class grid-rows-3 sets the grid to have three rows.

2fill in blank

medium

Complete the code to define a grid with four rows using Tailwind CSS.

Tailwind

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

Drag options to blanks, or click blank then click option'

Agrid-flow-row

Bgrid-cols-4

Cgrid-rows-4

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-4 which sets columns instead of rows.

Using flow classes that do not set row count.

The class grid-rows-4 sets the grid to have four rows.

3fill in blank

hard

Fix the error in the code to correctly define a grid with two rows.

Tailwind

<div class="grid [1] gap-2">
  <div>First</div>
  <div>Second</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid-cols-2

Bgrid-row-2

Cgrid-rows-1

Dgrid-rows-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-row-2 which is not a valid Tailwind class.

Using grid-cols-2 which sets columns instead of rows.

The correct class to define two rows is grid-rows-2. grid-row-2 is invalid.

4fill in blank

hard

Fill both blanks to create a grid with three rows and a gap between rows.

Tailwind

<div class="grid [1] [2]">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Drag options to blanks, or click blank then click option'

Agrid-rows-3

Bgap-4

Cgap-2

Dgrid-cols-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-3 instead of rows.

Using a gap class that is too large or unrelated.

grid-rows-3 sets three rows, and gap-2 adds spacing between rows and columns.

5fill in blank

hard

Fill all three blanks to create a grid with four rows, a gap of 6, and flow direction as rows.

Tailwind

<section class="grid [1] [2] [3]">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</section>

Drag options to blanks, or click blank then click option'

Agrid-rows-4

Bgap-6

Cgrid-flow-row

Dgrid-cols-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-4 instead of rows.

Using a gap class that is too small or missing.

Omitting the flow direction class.

grid-rows-4 sets four rows, gap-6 adds spacing, and grid-flow-row ensures the grid flows by rows.

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