<div class="lab-container">
<h1 class="lab-title">A vertical Flexbox-powered masonry</h1>
<div class="lab-description">
<p>If you don't like <a href="/blog/css-masonry/">CSS columns</a> for some reason, or are obsessed with Flexbox, this is how you do a CSS-only masonry. See more masonry layouts on <a href="https://w3bits.com/tools/grid-generator/">Grid Generator</a>.</p>
</div>
<div class="masonry">
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/banana.jpg" class="masonry-img" alt="Masonry Brick #1"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/raspberries.jpg" class="masonry-img" alt="Masonry Brick #3"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/telephone.jpg" class="masonry-img" alt="Masonry Brick #2"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/game-console.jpg" class="masonry-img" alt="Masonry Brick #4"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/donuts.jpg" class="masonry-img" alt="Masonry Brick #6"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/chair-balloon.jpg" class="masonry-img" alt="Masonry Brick #7"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/cactus.jpg" class="masonry-img" alt="Masonry Brick #8"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/orange.jpg" class="masonry-img" alt="Masonry Brick #9"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/red-chilli.jpg" class="masonry-img" alt="Masonry Brick #10"></figure>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/stool.jpg" class="masonry-img" alt="Masonry Brick #11"></figure>
</div>
</div>
:root {
--accent: #484D6D;
--masonry-gutter: .5rem;
}
.lab-container {
padding: 8rem 2rem;
}
.masonry {
display: flex;
width: 100%;
flex-flow: column wrap;
max-height: 1080px;
margin-left: calc(var(--masonry-gutter) * -1); /* Adjustment for the gutter */
counter-reset: brick;
}
.masonry-brick {
overflow: hidden;
border-radius: 5px;
margin: 0 0 var(--masonry-gutter) var(--masonry-gutter); /* Some Gutter */
background-color: #333;
color: white;
position: relative;
}
.masonry-brick:after {
position: absolute;
top: 1rem;
left: 1rem;
padding: .5rem .75rem;
border-radius: .25rem;
line-height: 1;
background-color: hsl(0 0 0 / 90%);
color: hsl(0 0 100% / 70%);
z-index: 5000;
counter-increment: brick;
content: counter(brick);
transition: font-size .25s, opacity .25s ease-in-out;
font-weight: 700;
opacity: .5;
}
.masonry-brick:hover:after {
font-size: 1.25em;
opacity: 1;
}
@media only screen and (min-width: 1024px) {
/* Adjusting vertical masonry height on desktop-sized screen */
.masonry {
max-height: 1600px;
}
/* Vertical masonry bricks on desktop-sized screen */
.masonry-brick {
width: 33.33333%;
}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
/* Adjusting vertical masonry height on tablet-sized screen */
.masonry {
max-height: 2000px;
}
/* Vertical masonry bricks on tablet-sized screen */
.masonry-brick {
width: 50%;
}
}
