Masonry layouts, popularized by Pinterest, create visually appealing grids where items of varying heights fit together like bricks in a wall. For years, achieving this effect required JavaScript libraries like Masonry.js or Isotope. Modern CSS now offers native solutions for creating masonry-style layouts without a single line of JavaScript.
This tutorial shows you how to create masonry layouts using pure CSS through the CSS columns technique, which provides true vertical masonry where items stack naturally within columns, creating the authentic Pinterest-style appearance that adapts beautifully across all devices.
CSS Columns Masonry Example
Let's start with a simple example that demonstrates the core concept. This example shows six colored boxes with different heights arranged in a three-column masonry layout:
<!DOCTYPE html>
<html>
<head>
<style>
.masonry {
column-count: 3;
column-gap: 15px;
padding: 20px;
background: #f8f9fa;
}
.item {
break-inside: avoid;
margin-bottom: 15px;
border-radius: 8px;
padding: 20px;
color: white;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="masonry">
<div class="item" style="height: 150px; background: #667eea;">Item 1</div>
<div class="item" style="height: 200px; background: #764ba2;">Item 2</div>
<div class="item" style="height: 120px; background: #f093fb;">Item 3</div>
<div class="item" style="height: 180px; background: #4facfe;">Item 4</div>
<div class="item" style="height: 160px; background: #00f2fe;">Item 5</div>
<div class="item" style="height: 140px; background: #43e97b;">Item 6</div>
</div>
</body>
</html>
Output:
The column-count: 3 property divides the container into three vertical columns, similar to newspaper layouts. Items flow from top to bottom within the first column, then move to the second column, creating the authentic masonry appearance where items of different heights stack naturally. The break-inside: avoid property ensures each item stays intact within a single column, preventing items from splitting across column boundaries. The column-gap: 15px creates consistent horizontal spacing between columns, while margin-bottom: 15px provides vertical spacing between items.
This approach is remarkably simple yet powerful. The browser handles all layout calculations automatically, distributing items evenly across columns while respecting the break-inside property. You don't need to calculate span values, manage complex grid configurations, or worry about content heights.
Complete Production-Ready Masonry Layout
Now let's build a full-featured masonry layout with cards, images, hover effects, and responsive behavior suitable for real-world projects:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: #f8f9fa;
padding: 40px 20px;
}
h1 {
text-align: center;
color: #2d3748;
font-size: 32px;
margin-bottom: 50px;
}
.masonry-container {
max-width: 1200px;
margin: 0 auto;
}
.masonry-grid {
column-count: 3;
column-gap: 20px;
}
.masonry-item {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
break-inside: avoid;
margin-bottom: 20px;
display: inline-block;
width: 100%;
}
.masonry-item:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.item-image {
width: 100%;
height: auto;
display: block;
background: linear-gradient(135deg, #667eea, #764ba2);
}
.item-content {
padding: 20px;
}
.item-title {
color: #2d3748;
font-size: 18px;
font-weight: 700;
margin-bottom: 10px;
}
.item-description {
color: #718096;
font-size: 14px;
line-height: 1.6;
}
.item-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 15px;
}
.tag {
background: #edf2f7;
color: #4a5568;
padding: 5px 12px;
border-radius: 15px;
font-size: 12px;
font-weight: 600;
}
@media (max-width: 992px) {
.masonry-grid {
column-count: 2;
}
}
@media (max-width: 640px) {
.masonry-grid {
column-count: 1;
}
}
</style>
</head>
<body>
<h1>CSS Columns Masonry Layout</h1>
<div class="masonry-container">
<div class="masonry-grid">
<div class="masonry-item">
<div class="item-image" style="height: 180px;"></div>
<div class="item-content">
<h3 class="item-title">Responsive Design</h3>
<p class="item-description">CSS columns automatically adjust based on viewport width.</p>
<div class="item-tags">
<span class="tag">CSS</span>
<span class="tag">Responsive</span>
</div>
</div>
</div>
<div class="masonry-item">
<div class="item-image" style="height: 220px;"></div>
<div class="item-content">
<h3 class="item-title">No JavaScript Required</h3>
<p class="item-description">This masonry layout works purely with CSS column properties. The break-inside avoid property prevents items from splitting across columns, creating clean vertical stacks.</p>
<div class="item-tags">
<span class="tag">Performance</span>
<span class="tag">Pure CSS</span>
</div>
</div>
</div>
<div class="masonry-item">
<div class="item-image" style="height: 160px;"></div>
<div class="item-content">
<h3 class="item-title">Dynamic Heights</h3>
<p class="item-description">Each card naturally adjusts to its content height.</p>
<div class="item-tags">
<span class="tag">Flexible</span>
</div>
</div>
</div>
<div class="masonry-item">
<div class="item-image" style="height: 140px;"></div>
<div class="item-content">
<h3 class="item-title">Mobile Friendly</h3>
<p class="item-description">Layout adapts from three columns on desktop to single column on mobile devices.</p>
<div class="item-tags">
<span class="tag">Mobile</span>
</div>
</div>
</div>
<div class="masonry-item">
<div class="item-image" style="height: 240px;"></div>
<div class="item-content">
<h3 class="item-title">Browser Compatible</h3>
<p class="item-description">CSS columns have excellent browser support across all modern browsers including Chrome, Firefox, Safari, and Edge without any polyfills.</p>
<div class="item-tags">
<span class="tag">Cross-Browser</span>
</div>
</div>
</div>
<div class="masonry-item">
<div class="item-image" style="height: 190px;"></div>
<div class="item-content">
<h3 class="item-title">Easy Maintenance</h3>
<p class="item-description">No library dependencies or complex calculations needed.</p>
<div class="item-tags">
<span class="tag">Simple</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
See the Pen masonary-wojs by Vinish Kapoor (@foxinfotech) on CodePen.
This production-ready example includes several enhancements that make it suitable for real projects. The cards feature smooth hover effects with transform and box-shadow transitions that provide visual feedback when users interact with items. The gradient backgrounds on images add visual interest, while the rounded corners and subtle shadows create depth and polish.
The responsive behavior is crucial for modern web applications. Media queries adjust the column count based on viewport width, displaying three columns on desktop screens wider than 992px, two columns on tablets between 640px and 992px, and a single column on mobile devices narrower than 640px. This ensures optimal viewing experience across all device sizes without compromising the masonry effect.
The layout works perfectly for image galleries, blog post grids, portfolio showcases, or any content where vertical flow and visual balance matter most. Each card automatically adjusts its height based on content, whether that's a short title and description or longer text with multiple tags. The browser handles all calculations, making the implementation incredibly simple while delivering professional results.
Conclusion
CSS columns provide an elegant, JavaScript-free solution for creating authentic masonry layouts. This approach eliminates the need for external libraries, reduces page load times, and simplifies maintenance. The technique works reliably across all modern browsers with excellent support dating back several years, making it a safe choice for production websites.
The simplicity of CSS columns makes it the ideal choice for most masonry layout needs. With just a few lines of CSS, you can create beautiful, responsive masonry layouts that rival any JavaScript solution. Whether you're building a photo gallery, a blog grid, or a portfolio showcase, CSS columns deliver professional results while keeping your codebase clean and dependency-free.
See also: How to Build Perfectly Responsive Layouts with CSS Grid
