CSS multi-column layout of list items doesn't align properly in Chrome
You need each item in the column to be displayed as "inline-block". That will solve your problem without needing to use jQuery.
Additionally, each element can be specified to have width: 100%
in order to get the them to use the full width of the rows.
Here is a working example:
$(document).ready(function() {
for( var i = 0; i < 24; i++ ) {
$("ul.newslist").append("<li><a href='#'>Item</a></li>");
}
$("ul.newslist > li").click(function() {
$(this).remove();
})
});
ul.newslist {
columns: 5;
background-color: #ccc;
padding: 16px 0;
list-style: none;
}
ul.newslist > li {
display: inline-block;
width: 100%;
border-top: 1px solid #000;
}
ul.newslist > li > a {
display: block;
padding: 4px;
background-color: #f6b;
text-decoration: none;
color: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="newslist"></ul>
I managed to balance uneven vertically-aligned columns by applying margin-*
properties to the elements inside the multicolumn'd container.
.content {
column-width: 15em; /* or could be column-count, however you want to set up multi columns */
}
.content > section {
-webkit-margin-before: 0;
-webkit-margin-after: 0;
}
I've played around as well, and several sources I've seen online make it seem to be a known issue with webkit. A good breakdown can be found here: http://zomigi.com/blog/deal-breaker-problems-with-css3-multi-columns/
Someday, CSS 3!
Maybe try a jQuery plugin like http://welcome.totheinter.net/columnizer-jquery-plugin/ ?