An annoying thing when using CSS Columns pops up every now and again:

  • When having list items (<li>) inside the columns, the items in the first column are often times a bit off. This happens across browsers in Chromium, Firefox and Safari (current stable version from Thu 15. Dec).
  • Setting the list items to anything but display: list-item gets rid of the issue – at the cost of not looking like, well, list items anymore. No bueno!
  • Getting rid of the list items vertical margin migitates the offset as well.
    • The missing spacing between items can then be resolved by adding a single direction padding, in my a case padding-bottom did the trick.
  • It’s not beautiful, but it gets the job done: list items are now evenly distributed