I have a list where I'd like to build two columns from. The list can have a variable amount of items in it, but a max. of 8
I always want the first column to have 4 elements.
I already tried column-count: 2
but this does not work fine on an uneven number, because the first row must contain 4 elements.
.container {
border: 1px solid red;
width: 300px;
height: 90px;
}
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
You can do this using Flexbox:
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 200px;
}
li {
height: 25%;
}
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With