Grid auto-flow and placement in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

How does grid-auto-flow: row behave in Tailwind CSS?

In Tailwind CSS, what is the effect of using grid-auto-flow: row on grid item placement?

A Items fill each column before moving to the next column.

B Items fill each row before moving to the next row.

C Items are placed randomly without following rows or columns.

D Items overlap each other in the same grid cell.

💡 Hint

Think about how rows and columns are filled in a grid layout.

The grid-auto-flow: row property makes grid items fill each row completely before starting a new row. This is the default behavior in CSS Grid and Tailwind's grid-flow-row utility.

📝 Syntax

intermediate

Which Tailwind class sets grid-auto-flow: column?

You want your grid items to fill columns first before moving to the next column. Which Tailwind CSS class achieves this?

A grid-flow-col

B grid-flow-row

C auto-flow-column

D grid-auto-column

💡 Hint

Tailwind uses short, descriptive class names for grid flow directions.

The class grid-flow-col sets grid-auto-flow: column, making items fill columns first.

❓ rendering

advanced

What is the visual result of this Tailwind grid layout?

Given this HTML and Tailwind CSS, what will the grid items look like in the browser?

<div class="grid grid-cols-3 grid-flow-row auto-rows-fr gap-2">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
  <div class="bg-yellow-500">4</div>
</div>

Tailwind

<div class="grid grid-cols-3 grid-flow-row auto-rows-fr gap-2">
  <div class="bg-blue-500">1</div>
  <div class="bg-green-500">2</div>
  <div class="bg-red-500">3</div>
  <div class="bg-yellow-500">4</div>
</div>

A Four boxes arranged in two rows: first row has 3 boxes, second row has 1 box.

B Boxes overlap in the first grid cell.

C Four boxes stacked vertically in one column.

D Four boxes arranged in a single row with equal width columns.

💡 Hint

Consider how 4 items fill 3 columns with row flow.

The grid has 3 columns and grid-auto-flow: row. Items fill the first row with 3 boxes, then the 4th box starts a new row alone.

❓ selector

advanced

Which Tailwind class correctly places an item at column 2, row 3?

You want a grid item to start at column 2 and row 3 in a Tailwind CSS grid. Which class combination achieves this?

A column-2 row-3

B start-col-2 start-row-3

C grid-col-2 grid-row-3

D col-start-2 row-start-3

💡 Hint

Tailwind uses col-start- and row-start- for grid placement.

The classes col-start-2 and row-start-3 place the item at column 2, row 3.

❓ accessibility

expert

How to ensure keyboard users can navigate a grid with auto-flow placement?

You have a grid with grid-auto-flow: column in Tailwind CSS. What is the best way to ensure keyboard users navigate the grid items in a logical order?

A Set tabindex="0" on all grid items and rely on DOM order matching visual order.

B Use <code>aria-flowto</code> attributes to define navigation order explicitly.

C Rearrange the DOM order to match the visual column-first placement of grid items.

D No special action needed; keyboard navigation always follows visual grid order.

💡 Hint

Keyboard navigation follows DOM order, not visual layout.

Keyboard users navigate elements in DOM order. When using grid-auto-flow: column, the visual order differs from DOM order by default. Rearranging DOM order to match visual order ensures logical keyboard navigation.