6

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>
Marcos Pérez Gude
  • 21,869
  • 4
  • 38
  • 69
Ditto
  • 296
  • 1
  • 13
  • 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. – Marcos Pérez Gude Jul 04 '16 at 06:57
  • @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. – Ditto Jul 04 '16 at 07:02
  • 1
    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 – Marcos Pérez Gude Jul 04 '16 at 07:05
  • @MarcosPérezGude Sorry that was a lapsus, by different sizes I meant different height. – Ditto Jul 04 '16 at 07:12
  • 1
    i dont think column will work with this you should go with isotope - masonry http://isotope.metafizzy.co/layout-modes/masonry.html or http://masonry.desandro.com/ – Vitorino fernandes Jul 04 '16 at 07:18
  • I think Flexbox would be a better option for what you are trying to do – Turqueso Dec 12 '17 at 18:36

1 Answers1

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/

Nitha
  • 672
  • 5
  • 10