As always, CSS is weird.

I was under the mistaken impression that using column-count would easily replace a number of silly UL based approaches for siloed content, navigation, etc. Turns out not so much. It is really good at doing what it was built for, which is to flow text content through columns like a newspaper. Trying to use it or specific layout is… problematic.

See the Pen Column-Count Stuff by Adam Leistico (@LeviticusMky) on CodePen.

• It doesn’t create any additional pseudo elements in the markup, which is both great and bad. You don’t have to worry about weird extras appearing in the code, but you also don’t have a whole lot of control over display of the columns, which is why it doesn’t work great for heavily designed areas of the site.
• It is seemingly line and pixel based, not element based. In the example there, you can see that when I add borders to the default column setups, they break inside the padding for the paragraph tags. You can correct for that with additional CSS, as in the last example, but it serves to reinforce that column-count is really just meant for flowing inline content, not block-level elements.
• There are still a few odd quirks. You may or may not see them in the example, but the inner margins of the columns seem to randomly double up on load, and then correct themselves when you refresh the CSS. The top and bottom margins act a bit odd between columns, too, making for some unpredictable results.

The verdict?

Use column-count for flowing inline content. Stick with hacked apart ULs for design elements.