Are there any CSS techniques available to make floated blocks fill in both upwards and in their float direction?
For example -
https://i.sstatic.net/uo06B.png
Instead of -
https://i.sstatic.net/oEijA.png
I know this can be achieved using JavaScript libraries like Masonry.
I was just curious if there are any CSS methods to achieve this or something similar.
Related codepen https://codepen.io/2nj2nu7p9oVLGXKS4tIpu8eILcmoXg/pen/QOdmqw
body * {
box-sizing: border-box;
}
.wrapper {
max-width: 500px;
background: limegreen;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.block {
height: 100px;
background: lightblue;
width: 250px;
float: left;
border: solid 2px;
&:nth-child(even) {
background: blue;
height: 150px;
}
}