Grid auto-flow and placement in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the grid to flow items by rows.

Tailwind

<div class="grid [1] gap-4">
  <div class="bg-blue-500 p-4">Item 1</div>
  <div class="bg-green-500 p-4">Item 2</div>
  <div class="bg-red-500 p-4">Item 3</div>
</div>

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

Agrid-flow-col

Bgrid-cols-3

Cgrid-flow-row

Dgrid-rows-3

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-col which flows items by columns instead of rows.

Confusing grid-cols-3 with flow direction.

The class grid-flow-row makes the grid place items by rows, filling each row before moving to the next.

2fill in blank

medium

Complete the code to make the grid flow items by columns.

Tailwind

<section class="grid [1] gap-2">
  <div class="bg-yellow-400 p-3">A</div>
  <div class="bg-purple-400 p-3">B</div>
  <div class="bg-pink-400 p-3">C</div>
</section>

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

Agrid-rows-1

Bgrid-flow-col

Cgrid-cols-1

Dgrid-flow-row

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-row which flows items by rows.

Confusing column flow with number of columns.

The class grid-flow-col makes the grid place items by columns, filling each column before moving to the next.

3fill in blank

hard

Fix the error in the code to correctly place the item in the second column.

Tailwind

<div class="grid grid-cols-3 gap-4">
  <div class="bg-gray-300 p-4">Item 1</div>
  <div class="bg-gray-500 p-4 col-start-[1]">Item 2</div>
  <div class="bg-gray-700 p-4">Item 3</div>
</div>

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

A3

B1

C4

D2

Attempts:

3 left

💡 Hint

Common Mistakes

Using col-start-1 which places the item in the first column.

Using a number outside the grid columns like 4.

The class col-start-2 places the item starting at the second column.

4fill in blank

hard

Fill both blanks to create a grid with 2 rows and place the item in the second row.

Tailwind

<div class="grid [1] gap-3">
  <div class="bg-teal-400 p-3 row-start-[2]">Hello</div>
</div>

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

Agrid-rows-2

Bgrid-cols-2

C2

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols-2 which sets columns, not rows.

Placing the item in row 1 instead of row 2.

grid-rows-2 sets the grid to have 2 rows. row-start-2 places the item in the second row.

5fill in blank

hard

Fill all three blanks to create a grid flowing by columns with 3 columns and place the item starting at column 3.

Tailwind

<div class="grid [1] [2] gap-2">
  <div class="bg-orange-400 p-2 col-start-[3]">Box</div>
</div>

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

Agrid-flow-row

Bgrid-cols-3

C3

Dgrid-flow-col

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-flow-row instead of grid-flow-col.

Setting wrong number of columns.

Placing the item in the wrong column.

grid-flow-col makes the grid flow by columns. grid-cols-3 sets 3 columns. col-start-3 places the item starting at the third column.

Practice

1. What does the Tailwind class grid-flow-row do in a grid container?

easy

A. It places grid items in rows from left to right, then top to bottom.

B. It places grid items in columns from top to bottom, then left to right.

C. It fills grid gaps by rearranging items densely.

D. It disables grid auto-placement.

Solution

1. Step 1: Understand grid auto-flow direction

   The class grid-flow-row sets the grid to place items in rows first, meaning items fill left to right in each row.

2. Step 2: Confirm placement order

   After filling a row, the next items start on the next row below, continuing left to right again.

3. Final Answer:

   It places grid items in rows from left to right, then top to bottom. -> Option A

4. Quick Check:

   grid-flow-row = row-wise placement [OK]

Hint: Row flow means fill left to right, then next row down [OK]

Common Mistakes:

• Confusing row flow with column flow
• Thinking dense is automatic without class
• Assuming grid items stack vertically by default

2. Which Tailwind class correctly applies grid auto-flow to fill columns first and then rows?

easy

A. grid-flow-row

B. grid-auto-flow-col

C. grid-flow-col

D. grid-auto-columns

Solution

1. Step 1: Identify correct Tailwind syntax for column flow

   The class grid-flow-col sets the grid to fill columns first, placing items top to bottom in each column.

2. Step 2: Verify other options

   Options grid-auto-flow-col and grid-auto-columns are not valid Tailwind classes for this purpose.

3. Final Answer:

   grid-flow-col -> Option C

4. Quick Check:

   grid-flow-col = column-wise placement [OK]

Hint: Use grid-flow-col for column-first placement [OK]

Common Mistakes:

• Using incorrect class names like grid-auto-flow-col
• Mixing up row and column flow classes
• Assuming grid-auto-columns controls flow

3. Given this Tailwind grid container:

<div class="grid grid-cols-3 grid-flow-row-dense gap-2">
  <div class="col-span-2">A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
</div>

How will the items be placed visually?

medium

A. A spans first two columns in row 1, B fills third column row 1, C and D fill next row

B. A spans first two columns in row 1, B and C fill next row, D fills gap in row 1

C. A spans first two columns in row 1, B fills third column row 1, D fills gap in row 1, C in next row

D. A spans first two columns in row 1, B, C, D all fill next row

Solution

1. Step 1: Understand grid-flow-row-dense behavior

   The grid-flow-row-dense class places items row-wise but tries to fill gaps left by spanning items.

2. Step 2: Analyze item placement

   Item A spans 2 columns in row 1, leaving the 3rd column free. Item B fits in that 3rd column in row 1. Items C and D go to the next row filling columns 1 and 2.

3. Final Answer:

   A spans first two columns in row 1, B fills third column row 1, C and D fill next row -> Option A

4. Quick Check:

   Dense fills gaps left by spanning items [OK]

Hint: Dense fills gaps left by spanning items in row flow [OK]

Common Mistakes:

• Ignoring dense and placing items strictly in order
• Placing D before C incorrectly
• Assuming no gap filling happens

4. You wrote this Tailwind grid:

<div class="grid grid-flow-col gap-4">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

But items stack vertically in a single column instead of forming multiple columns. What is the likely mistake?

medium

A. Using grid-flow-col instead of grid-flow-row

B. Missing grid-cols or grid-rows to define grid size

C. gap-4 is causing layout issues

D. Items need explicit width to stack

Solution

1. Step 1: Check grid container setup

   Using grid-flow-col places items top to bottom in each column, then next column, but without defining the number of columns or rows, the grid defaults to one implicit column.

2. Step 2: Identify missing grid size

   Without grid-cols-3 or similar, the grid does not create multiple columns, so items stack vertically in one column.

3. Final Answer:

   Missing grid-cols or grid-rows to define grid size -> Option B

4. Quick Check:

   Define grid size to control flow layout [OK]

Hint: Always set grid-cols or grid-rows with grid-flow [OK]

Common Mistakes:

• Assuming grid-flow-col alone creates columns
• Blaming gap for layout issues
• Forgetting grid size classes

5. You want a responsive grid that places items in columns on small screens and switches to dense row flow on larger screens. Which Tailwind classes achieve this?

hard

A. grid grid-flow-row sm:grid-flow-row-dense grid-cols-2 sm:grid-cols-4 gap-3

B. grid grid-flow-row-dense sm:grid-flow-col grid-cols-4 sm:grid-cols-2 gap-3

C. grid grid-flow-col-dense sm:grid-flow-row grid-cols-2 sm:grid-cols-4 gap-3

D. grid grid-flow-col sm:grid-flow-row-dense grid-cols-2 sm:grid-cols-4 gap-3

Solution

1. Step 1: Set default column flow for small screens

   The class grid-flow-col sets column flow by default (small screens).

2. Step 2: Override with dense row flow on larger screens

   The class sm:grid-flow-row-dense changes flow to dense row on screens medium and up.

3. Step 3: Adjust columns for responsiveness

   grid-cols-2 for small screens and sm:grid-cols-4 for larger screens set grid size accordingly.

4. Final Answer:

   grid grid-flow-col sm:grid-flow-row-dense grid-cols-2 sm:grid-cols-4 gap-3 -> Option D

5. Quick Check:

   Use responsive prefixes to switch flow and columns [OK]

Hint: Use sm: prefix to change flow and columns on bigger screens [OK]

Common Mistakes:

• Mixing flow directions and breakpoints incorrectly
• Forgetting to set grid-cols for each breakpoint
• Using non-existent classes like grid-flow-col-dense