How to Create Masonry Layout with CSS Grid Easily

To create a masonry layout with CSS Grid, use grid-template-columns to define columns and grid-auto-rows with a fixed row height. Then, use grid-row-end: span on grid items to make them span multiple rows based on their content height, creating a masonry effect.

Syntax

The basic syntax for a masonry layout with CSS Grid involves setting up columns and fixed row heights, then controlling how many rows each item spans.

• display: grid; activates grid layout.
• grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); creates responsive columns.
• grid-auto-rows: 10px; sets a fixed row height to measure spans.
• grid-row-end: span N; on items makes them span N rows, adjusting height.

css

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 10px;
  gap: 10px;
}

.item {
  grid-row-end: span N; /* N depends on content height */
}

Example

This example shows a masonry layout with CSS Grid where items have different heights and automatically fill columns with gaps.

css

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 10px;
  gap: 10px;
  padding: 10px;
}
.item {
  background: #8bc34a;
  border-radius: 6px;
  padding: 10px;
  color: white;
  font-weight: bold;
  box-sizing: border-box;
}
.item:nth-child(odd) {
  grid-row-end: span 20;
}
.item:nth-child(even) {
  grid-row-end: span 30;
}

Output

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
</div>

Common Pitfalls

Common mistakes when creating masonry layouts with CSS Grid include:

• Not setting grid-auto-rows to a fixed value, which breaks the row span calculation.
• Forgetting to calculate grid-row-end: span N; dynamically based on content height, causing uneven gaps.
• Using fixed heights on items instead of spanning rows, which loses the masonry effect.

To fix these, measure item height and divide by grid-auto-rows height to set the correct span.

css

/* Wrong: no fixed row height */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.item {
  /* No grid-row-end span, items overlap or gaps appear */
}

/* Right: fixed row height and span */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows: 10px;
  gap: 10px;
}
.item {
  grid-row-end: span 20; /* Adjust based on content height */
}

Quick Reference

Tips for CSS Grid masonry layout:

• Use grid-auto-rows with a small fixed height (e.g., 10px).
• Calculate grid-row-end: span N; by dividing item height by grid-auto-rows.
• Use repeat(auto-fill, minmax()) for responsive columns.
• Set gap for spacing between items.
• Use JavaScript if dynamic height measurement is needed for real content.

Key Takeaways

Set a fixed row height with grid-auto-rows to control vertical spacing.

Use grid-row-end: span N to make items span multiple rows based on height.

Use repeat(auto-fill, minmax()) for responsive column layout.

Calculate spans dynamically for true masonry effect or use JavaScript for dynamic content.

Avoid fixed heights on items to keep the masonry layout flexible.