Unbalanced CSS Columns in Chrome

Unbalanced CSS columns in Chrome

Possibly a stupid question, but have you looked into flexbox?

.columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
      width: 300px;
}

EDIT Going through unanswered questions and didn't realize how old this is.

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>

chrome and safari render css columns differently when number of items equals number of columns

I sorted this out, at least for Safari vs. Chrome.

Since this only applies when the number of items is equal to the number of columns, and since that number is known, I can apply display: inline-block; to li and then override that when the 2nd listing is also the last listing.

In my case, the solution is to add to the CSS:

li {
  display: inline-block; 
}

li:last-child:nth-child(2) {
  display: block;
}

Full CSS:

ul {
  moz-column-count:2;
  -webkit-column-count:2;
  column-count:2;
  column-gap: 2em;
}

li {
  display: inline-block;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width:100%;
  list-style-type:none;
  padding: 1em;
  box-sizing:border-box;
  background-color: #90cdc0;
  margin-bottom: 2em;
}

li:last-child:nth-child(2) {
  display: block;
}

lists styled with multiple columns breaks in chrome

I was able to fix it with a width on the ul container, I hope it'll help :

.multi ul {
    width:500px;
}

See your updated fiddle. You're right on firefox and opera it's working and not on chrome, I tried some other css columns parameters without success.

---

Related Topics