Looking to organize li based on the maximum height of the div, with additional items automatically moving to the right side.
For example,
-------------
1 4 7
2 5 8
3 6
-------------Please suggest a more effective method using CSS or JavaScript.
I've tried using the following code snippet but it's not working as expected:
ul {
column-count: 2;
column-gap: 0;
width: 200px;
}
li {
display: inline-block;
width: 100px;
height: 100px;
background:
linear-gradient(
rgba(255,0,0,0.4),
rgba(255,0,0,0.4)
),
url(http://placekitten.com/g/100/100);
color: white;
text-align: center;
font-size: 50px;
line-height: 100px;
font-weight: bold;
border: 1px solid white;
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>