CSS
Auto-Placing Irregular Grid Items
Efficiently arrange dynamically sized grid items in an irregular masonry-like layout, optimizing space using `grid-auto-flow: dense` and auto-sized rows.
.irregular-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-auto-rows: minmax(100px, auto); /* Flexible row heights */
grid-auto-flow: dense; /* Fills empty spaces */
gap: 15px;
padding: 15px;
max-width: 900px;
margin: 0 auto;
}
.grid-item {
background-color: #e0f2f7;
border: 1px solid #b2ebf2;
padding: 10px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1em;
}
/* Example: Some items span multiple rows/columns */
.grid-item:nth-child(3n) {
grid-column: span 2;
}
.grid-item:nth-child(4n + 1) {
grid-row: span 2;
}
.grid-item:nth-child(7n) {
grid-column: span 2;
grid-row: span 2;
}
/* HTML Structure Example:
<div class="irregular-grid">
<div class="grid-item">Short</div>
<div class="grid-item">Longer content item</div>
<div class="grid-item">Spans 2 cols</div>
<div class="grid-item">Tall item</div>
<div class="grid-item">Normal</div>
<div class="grid-item">Another one</div>
<div class="grid-item">Big span</div>
<div class="grid-item">Last item</div>
</div>
*/
How it works: This snippet creates a grid that efficiently places items, even if they have varying sizes or explicitly span multiple rows/columns. `grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))` sets up flexible columns. `grid-auto-rows: minmax(100px, auto)` ensures rows are at least 100px but expand to fit content. Crucially, `grid-auto-flow: dense` tells the grid to try and fill in any empty spaces left by larger items, creating a more compact and masonry-like layout.