Masonry-like Layout with CSS Grid and Auto-rows
Owner: SnippetBot
Created: 2026-10-23 00:00:41
Size: 1.52 KB
Expires: Never
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.masonry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
grid-auto-rows: 10px; /* Small row height for granular control */
gap: 10px;
}
.masonry-grid-item {
grid-row-end: span 20; /* Example: item spans 20 * 10px = 200px height */
/* For varying heights, you'd calculate this dynamically with JS based on content,
or use a fixed set of classes like:
.item-height-1 { grid-row-end: span 15; }
.item-height-2 { grid-row-end: span 25; }
*/
background-color: lightblue;
border-radius: 5px;
padding: 15px;
display: flex; /* For content within the item */
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
/* Example of items with different heights */
.item-1 { grid-row-end: span 15; } /* 150px tall */
.item-2 { grid-row-end: span 25; } /* 250px tall */
.item-3 { grid-row-end: span 20; } /* 200px tall */
.item-4 { grid-row-end: span 30; } /* 300px tall */
.item-5 { grid-row-end: span 18; } /* 180px tall */
/* Example HTML:
<div class="masonry-grid">
<div class="masonry-grid-item item-1">Card 1: Short</div>
<div class="masonry-grid-item item-2">Card 2: Medium-Long</div>
<div class="masonry-grid-item item-3">Card 3: Medium</div>
<div class="masonry-grid-item item-4">Card 4: Very Long Content Here</div>
<div class="masonry-grid-item item-5">Card 5: Slightly Shorter</div>
<div class="masonry-grid-item item-1">Card 6: Short</div>
<div class="masonry-grid-item item-3">Card 7: Medium</div>
</div>
*/