Why does adding border-top make left column move to middle column?

Issue

So I'm trying to create a list where all list-item have border-bottom: 1px solid; and separate it into 3 columns with column-count:3. So if i were to have 8 items it would display 3 items in the first column, 3 in second and 2 in the third.

Which is working fine, but the issue start when i want to add border-top: 1px solid on the first element. Instead of display "3,3,2" its showing as "2,3,3".

The reason I'm not using grid is because the number of items I wanna show can be variate.

I made an example with the same behaviour.

.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>

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>

Solution

I added a 1px transparent border to make them all the same size.

Check the snippet:

.wrapper {
  column-count: 3;
}

.border-bottom {
  break-inside: avoid;
  border-bottom: 1px solid;
}

.border-top {
  border-top: 1px solid;
}

li {
  list-style: none;
  border:1px solid transparent;
}

<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>

Answered By - yherbawi