Is there any way for the third brick to always be in the next column if there is enough space for it? Is there any way for the third brick to always be in the next column if there is enough space for it?
.intro h3 a {
font-weight: 400;
}
/* Masonry grid */
.masonry {
transition: all .5s ease-in-out;
column-gap: 30px;
column-fill: initial;
}
/* Masonry item */
.masonry .brick {
margin-bottom: 30px;
display: inline-block; /*Fix the misalignment of items */
vertical-align: top; /* Keep the item on the very top */
border: 1px solid black;
}
/* Masonry image effects */
/* Bordered masonry */
.masonry.bordered {
column-rule: 1px solid #eee;
column-gap: 50px;
}
.masonry.bordered .brick {
padding-bottom: 25px;
margin-bottom: 25px;
}
/* Gutterless masonry */
.masonry.gutterless {
column-gap: 0;
}
.masonry.gutterless .brick {
margin-bottom: 0;
}
/* Masonry on tablets */
/* Masonry on big screens */
@media only screen and (min-width: 400px) {
.desc {
font-size: 1.25em;
}
.intro {
letter-spacing: 1px;
}
.masonry {
column-count: 3;
}
}
.masonry {
text-align: justify;
}
.container {
text-align: justify;
}<div class="masonry">
<div class="brick">
1. TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
<div class="brick">
2. TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
<div class="brick">
3. TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
<div class="brick">
4. TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT
</div>
</div>Is there any way for the third brick to always be in the third column if there is enough space for it?