.masonry-with-columns
- for i in (1..15)
div #{i}
View Compiled
body {
margin: 0;
padding: 1rem;
}
.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;
}
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.