Thats because CSS is not powerful enough, not helped that you can't use something like flexbox if you need to support old browsers but even the latest version of $YOUR_BROWSER does not have a way to say that I want a list element to layout its elements in one vertical column that is also centered vertically on the screen if it has fewer elements than there is space for on a screen, but having it split into additional columns and align all elements in all columns to the top if there are more elements than space on the screen. It is a fairly simple layout and I ended up having to do it in JS because flexbox only has a few standard modes for what to do when the content overflows and those don't effect the margins of the element.
CSS needs to be replaced with a more capable scripting language, or at least one based on constraints but until that happens we are stuck with javascript.
CSS needs to be replaced with a more capable scripting language, or at least one based on constraints but until that happens we are stuck with javascript.