CSS column-count doesn't fill the whole area

Question

I'm trying to display items in 8 columns with css3 rule column-count. However, sometimes it shows 6, sometimes 7. I tried to set a specific width for the items, and nothing seems to work.

Click here to see the Fiddle

body {margin: 0;}
.container {
  margin: auto;
  padding: 0 15px;
  background: #eee;
}
@media (min-width: 768px) {
  .container {width: 750px;}
}
@media (min-width: 992px) {
  .container {width: 970px;}
}
@media (min-width: 1200px) {
  .container {width: 1170px;}
}
.brick-wall {
  -webkit-column-gap: 0;
  -webkit-column-fill: balance;
  -moz-column-gap: 0;
  -moz-column-fill: balance;
  column-gap: 0;
  column-fill: balance;
  -webkit-column-count: 8;
  -moz-column-count: 8;
  column-count: 8;
}
.brick {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  text-align: center;
}
.brick-wall .brick .brick-content {
  border: 1px solid #000;
  display: inline-block;
  vertical-align: top;
  width: 95%;
  margin: 5px 0;
}

<div class="container">
  <div class="brick-wall">
    <script type="text/javascript">
      for(i = 0;i < 17;i++) document.write('<div class="brick"><div class="brick-content"><br/>' + (i + 1) + '<br/></div></div>');
    </script>
  </div>
</div>

Knoxville

In your fiddle always is 6. The problem with the columns is that the rendered result is automatic, you don't have the total control of that. – Ruben

@MarcosPérezGude My client wants to show a pinterest-styled gallery for each event. And he wants 8 columns of thumbnails. The thumbnails have different sizes, hence the need of the columns. But depending how many images are being displayed, sometimes there is an ugly not filled space at the right. I really need to figure out what to do. – Knoxville

Sorry but columns does not work with different sizes. Each column will have the same width. It was created to format texts, not to layout elements. Maybe you need flexbox not columns – Ruben

@MarcosPérezGude Sorry that was a lapsus, by different sizes I meant different height. – Knoxville

i dont think column will work with this you should go with isotope - masonry isotope.metafizzy.co/layout-modes/masonry.html or masonry.desandro.com – Neom

I think Flexbox would be a better option for what you are trying to do – Transpose

Answer 1

Using flex layout will solve the issues with column layout

.brick-wall{
 display: flex;
 font-size:18px;
  flex-wrap: wrap;
 }
 .brick {
   width: 11.5%;
   margin: .5%;
   text-align: center;
   border: 1px solid #000;
   display: block;
 }

https://jsfiddle.net/yh4yvoe3/9/

Effeminacy