Currently, I am working on creating a list with each list item having a bottom border of 1px solid. The list is then divided into 3 columns using column-count:3 CSS property. For instance, if there are 8 items, it should display 3 items in the first column, 3 in the second, and 2 in the third.
Everything works fine until I try to add a top border of 1px solid to the first element. Instead of displaying "3,3,2" as intended, it shows as "2,3,3".
I have avoided using grid because the number of items I want to show can vary.
I have created an example demonstrating this behavior:
.wrapper {
column-count: 3;
}
.border-bottom {
break-inside: avoid;
border-bottom: 1px solid;
}
.border-top {
border-top: 1px solid;
}
li {
list-style: none;
}<ul class="wrapper">
<li class="border-bottom border-top">
A
</li>
<li class="border-bottom">
B
</li>
<li class="border-bottom">
C
</li>
<li class="border-bottom">
D
</li>
<li class="border-bottom">
E
</li>
<li class="border-bottom">
F
</li>
<li class="border-bottom">
G
</li>
<li class="border-bottom">
H
</li>
</ul>Loading the same code without Border-top:1px solid on the first <li>:
.wrapper {
column-count: 3;
}
.border-bottom {
break-inside: avoid;
border-bottom: 1px solid;
}
li {
list-style: none;
}<ul class="wrapper">
<li class="border-bottom">
A
</li>
<li class="border-bottom">
B
</li>
<li class="border-bottom">
C
</li>
<li class="border-bottom">
D
</li>
<li class="border-bottom">
E
</li>
<li class="border-bottom">
F
</li>
<li class="border-bottom">
G
</li>
<li class="border-bottom">
H
</li>
</ul>