Exploring various masonry techniques and delving into the overview provided
https://css-tricks.com/piecing-together-approaches-for-a-css-masonry-layout/
The discussion revolves around: "Is vertical order with ragged bottoms acceptable?"
An illustrative CodePen supposedly demonstrating these ragged bottoms can be found here https://codepen.io/chriscoyier/pen/NeRNBO or here https://codepen.io/chriscoyier/pen/XojXxy
However, I am unable to locate the alleged ragged bottoms
Do I require further guidance, or is this a matter that browsers have already addressed?
(the method showcased in the codepen, pure css)
.masonry-with-columns {
columns: 6 200px;
column-gap: 1rem;
div {
width: 150px;
background: #EC985A;
color: white;
margin: 0 1rem 1rem 0;
display: inline-block;
width: 100%;
text-align: center;
font-family: system-ui;
font-weight: 900;
font-size: 2rem;
}
@for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 100) + px;
height: $h;
line-height: $h;
}
}
}
(Alternatively, the flex-based approach)
.masonry-with-flex {
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 1000px;
div {
width: 150px;
background: #EC985A;
color: white;
margin: 0 1rem 1rem 0;
text-align: center;
font-family: system-ui;
font-weight: 900;
font-size: 2rem;
}
@for $i from 1 through 36 {
div:nth-child(#{$i}) {
$h: (random(400) + 100) + px;
height: $h;
line-height: $h;
}
}
}