Masonry-style grid in Tailwind - Browser Rendering Trace

Render Flow - Masonry-style grid

Parse HTML container

↓

Apply Tailwind CSS classes

↓

Apply custom .masonry styles

↓

Set column-count: 3

↓

Flow items sequentially into columns

↓

Apply break-inside: avoid and margin-bottom to items

↓

Browser balances column heights

↓

Browser arranges items in columns

↓

Paint final masonry layout

The browser reads the HTML container, applies Tailwind CSS classes and custom masonry styles, calculates the column widths and item sizes, then arranges items vertically in columns to create a masonry effect.

Render Steps - 3 Steps

Code Added:<section class="masonry">...</section>

Before

[Empty page]

→

After

[Vertical stack in single column]
| [Item 1] |
| [Item 2] |
| [Item 3] |
| [Item 4] |
| [Item 5] |
| [Item 6] |

Adding the masonry container with items creates a basic block layout where items stack vertically in a single column.

🔧 Browser Action:Creates block formatting context and stacks items vertically

Code Sample

This code creates a 3-column masonry layout using CSS columns with Tailwind utility classes and custom CSS for column count and gap.

Tailwind

<section class="masonry">
  <article class="bg-blue-200 p-4">Item 1<br>Short content</article>
  <article class="bg-green-200 p-4">Item 2<br>Medium content<br>More text</article>
  <article class="bg-red-200 p-4">Item 3<br>Long content<br>More text<br>Even more text</article>
  <article class="bg-yellow-200 p-4">Item 4<br>Short content</article>
  <article class="bg-purple-200 p-4">Item 5<br>Medium content<br>More text</article>
  <article class="bg-pink-200 p-4">Item 6<br>Long content<br>More text<br>Even more text</article>
</section>

Tailwind

@layer utilities {
  .masonry {
    column-count: 3;
    column-gap: 1rem;
  }
  .masonry > * {
    break-inside: avoid;
    margin-bottom: 1rem;
  }
}

Render Quiz - 3 Questions

After applying step 2, how are the items arranged visually?

A Stacked vertically in 3 columns with items flowing top to bottom

B Arranged in rows with equal height items

C Overlapping each other in one column

D Spread evenly in a single row

Common Confusions - 3 Topics

Why do items sometimes break between columns?

Without break-inside: avoid, the browser may split an item across columns, causing visual breaks. Step 3 fixes this by keeping items whole.

💡 Use break-inside: avoid on masonry items to prevent breaks.

Why does grid layout not create masonry effect?

Grid places items row by row, so items align horizontally, not stacked vertically like masonry. Using column-count creates vertical stacking.

💡 Grid is for rows and columns; columns property stacks items vertically.

Why is there no gap between items vertically in columns?

Grid gap only applies between grid cells. For column layout, margin-bottom on items adds vertical spacing as in step 3.

💡 Add margin-bottom to items for vertical gaps in column layouts.

Property Reference

Property	Value Applied	Visual Effect	Common Use
column-count	3	Splits container into 3 vertical columns	Create masonry columns
column-gap	1rem	Adds horizontal space between columns	Separate columns visually
break-inside	avoid	Prevents items from breaking across columns	Keep items whole in masonry
margin-bottom	1rem	Adds vertical spacing between items	Separate stacked items

Concept Snapshot

Masonry-style grid stacks items vertically in columns. Use CSS column-count to create columns. Apply break-inside: avoid to keep items whole. Add margin-bottom for vertical spacing. Grid layout arranges items row-wise, not masonry. Tailwind can combine utilities with custom CSS for masonry.