Masonry-style grid in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ layout

intermediate

What is the visual effect of this Tailwind CSS grid code?

Consider this Tailwind CSS snippet for a grid container:

class="grid grid-cols-3 gap-4 auto-rows-min"

What will the grid layout look like when items have different heights?

A A single column layout with items stacked vertically.

B A 3-column grid where rows adjust their height individually to fit each item, creating a masonry effect.

C A 3-column grid where all rows have the same height, matching the tallest item in each row.

D A 3-column grid with fixed row heights, causing overflow if items are taller.

💡 Hint

Think about how 'auto-rows-min' affects row height in a grid.

The 'auto-rows-min' sets the minimum row height, but all rows in a grid have the same height per row line. So each row's height matches the tallest item in that row, not individual items. This means no masonry effect.

❓ selector

intermediate

Which Tailwind utility enables a masonry-style column layout?

You want to create a masonry-style grid with columns that flow vertically and items stacked unevenly. Which Tailwind CSS utility class helps achieve this?

A grid-cols-3

B grid-flow-row

C flex flex-wrap

D columns-3

💡 Hint

Masonry layouts often use CSS columns, not grid columns.

The 'columns-3' utility creates CSS columns that flow vertically, stacking items in a masonry style. 'grid-cols-3' creates grid columns but does not produce masonry.

🧠 Conceptual

advanced

Why does a CSS Grid not create a true masonry layout by default?

Given a CSS Grid container with multiple columns and items of varying heights, why does it not produce a masonry effect where items stack vertically without gaps?

A Because grid rows are always the same height across the entire row, so items align horizontally.

B Because grid columns automatically adjust their width to fit items, preventing masonry.

C Because grid items cannot span multiple rows or columns.

D Because grid containers do not support gaps between items.

💡 Hint

Think about how grid rows behave in height.

CSS Grid defines rows that span the full width, so all items in a row share the same height. This prevents items from stacking unevenly vertically like masonry.

❓ rendering

advanced

What is the rendered output of this Tailwind CSS snippet?

Given this HTML and Tailwind CSS:

<div class="columns-2 gap-4">
  <div class="bg-blue-300 p-4">Short</div>
  <div class="bg-green-300 p-4 h-32">Tall</div>
  <div class="bg-red-300 p-4">Medium height</div>
</div>

How will the items be arranged visually?

A A 2-column grid with rows aligned horizontally, all rows same height as tallest item in that row.

B Two vertical columns with items stacked top to bottom in each column, uneven heights creating a masonry effect.

C Items stacked vertically in a single column with gaps between them.

D Items arranged horizontally in a single row with equal widths.

💡 Hint

CSS columns flow vertically, stacking items unevenly.

The 'columns-2' class creates two CSS columns. Items flow vertically filling the first column top to bottom, then the second column, producing a masonry effect with uneven heights.

❓ accessibility

expert

How to ensure keyboard accessibility in a masonry-style grid using CSS columns?

When using CSS columns (e.g., Tailwind's 'columns-3') for a masonry layout, what is a key accessibility concern for keyboard users?

A Keyboard users may navigate items out of visual order because DOM order flows top to bottom, left to right visually but columns flow top to bottom per column.

B CSS columns automatically reorder DOM elements to match visual order, so no concern.

C Keyboard users cannot tab through items inside CSS columns.

D Screen readers ignore items inside CSS columns.

💡 Hint

Think about how DOM order and visual order differ in CSS columns.

CSS columns flow content vertically per column, but DOM order is linear top to bottom. Keyboard navigation follows DOM order, which may not match visual reading order, confusing users.