A masonry style grid layout built with pure HTML and CSS that arranges items in vertical columns where elements stack naturally based on height, creating an organic, flowing layout without relying on JavaScript or external libraries.
Usage
This component is ideal for content where item height varies, such as image galleries, blog cards, UI component libraries, inspiration boards, or resource collections where a traditional row-based grid would waste space.
Implementation
The masonry effect is achieved using CSS column layouts or grid based techniques with auto placement, allowing items to flow vertically and fill available space efficiently while remaining responsive across screen sizes.
HTML
<div class="ss-grid masonry">
<div class="item">A</div>
<div class="item tall">B</div>
<div class="item">C</div>
</div>CSS
.ss-grid.masonry{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
grid-auto-rows:10px;
gap:16px;
}
.item{
background:#e5e7eb;
border-radius:12px;
padding:20px;
grid-row:span 18;
}
.item.tall{
grid-row:span 28;
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Handles uneven content heights naturally
- Reduces unused vertical space
- Creates a fluid, organic layout feel
- Designed for galleries and content collections
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.