<div class="lab-container">
<h1 class="lab-title">A horizontal masonry with Flexbox</h1>
<div class="lab-description">
<p>Heads up: this masonry may not look as promising as the <a href="/labs/vertical-flexbox-masonry/">vertical one</a>, but it goes well the general left-to-right content scanning flow.</p>
<p>Find 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>
<figure class="masonry-brick masonry-brick--v"><img decoding="async" src="https://cdn.w3bits.com/stock/objects/audio-cassette.jpg" class="masonry-img" alt="Masonry Brick #11"></figure>
</div>
</div>
:root {
--accent: #467867;
}
.lab-container {
padding: 8rem 2rem;
}
.masonry {
display: flex;
width: 100%;
flex-flow: row wrap;
margin-left: -8px; /* Adjustment for the gutter */
counter-reset: brick;
}
.masonry-brick {
overflow: hidden;
border-radius: 5px;
margin: 0 0 8px 8px; /* Some Gutter */
background-color: #333;
color: white;
position: relative;
flex: auto;
height: 250px;
min-width: 150px;
}
.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: 2.25em;
opacity: 1;
}
.masonry-img {
object-fit: cover;
width: 100%;
height: 100%;
}
@media only screen and (min-width: 1024px) {
/* Horizontal masonry bricks on desktop-sized screen */
.masonry-brick:nth-child(4n+1) {
width: 250px;
}
.masonry-brick:nth-child(4n+2) {
width: 325px;
}
.masonry-brick:nth-child(4n+3) {
width: 180px;
}
.masonry-brick:nth-child(4n+4) {
width: 380px;
}
}
@media only screen and (max-width: 1023px) and (min-width: 768px) {
/* Horizontal masonry bricks on tabled-sized screen */
.masonry-brick:nth-child(4n+1) {
width: 200px;
}
.masonry-brick:nth-child(4n+2) {
width: 250px;
}
.masonry-brick:nth-child(4n+3) {
width: 120px;
}
.masonry-brick:nth-child(4n+4) {
width: 280px;
}
}
