2

I have a list of blocks with various heights. 

<div class="container">
  <div class="block">
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
    <div class="item">abcxyz</div>
  </div>
  <div class="block">
    <div class="item">abcxyz</div>
  </div>
...
</div>

I want them to flow in 3 columns using css column-count property. I don't want the blocks to be broken so I apply the column-break-inside: avoid. The problem is when it's applied then the columns' height division are very unequal. 

.container {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  height: 180px;
}
.block {
  padding: 10px;
  border-bottom: 2px solid #97979b;
  -webkit-column-break-inside:avoid;
  -moz-column-break-inside:avoid;
  -o-column-break-inside:avoid;
  -ms-column-break-inside:avoid;
  column-break-inside:avoid;
}

See this codepen http://codepen.io/KwiZ/pen/PwmXPB. The height division could have been better, like when I set a fixed height for the container: http://codepen.io/anon/pen/emWbmm, but of course fixed height is bad and should be avoided. Why this happens and how to make the columns' height naturally equal?

KwiZ
  • 1,364
  • 2
  • 15
  • 25
  • 1
    There is no `column-break-inside`. The property is called [`break-inside`](https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside), which currently has no browser support. However, webkit and blink browsers may have the non-standard `-webkit-column-break-inside`. – Oriol Jan 21 '15 at 17:50
  • @Oriol is it related to the reason why the columns' height are unequal? – KwiZ Jan 21 '15 at 17:56
  • the column's height is unequal because of your `border` and `padding` on the `.block` class. The more elements with `.block` class you have, the more different your height will be, because the CSS will simply divide your content in 3 columns, but if the elements inside are all of different height, then you'll obviously have different column heights – Devin Jan 21 '15 at 18:27
  • @Devin I removed the border and padding and the columns were really more equal. But I still don't understand how it affects the columns height equality. Without the "no break inside" it automatically adjusts for equal columns, why it no longer works when column-break-inside is added? And is there any way we can get equal columns height containing blocks with padding/margin/border? – KwiZ Jan 21 '15 at 18:36
  • @KwiZ I think you should use height. Read about `column-fill` http://css-tricks.com/almanac/properties/c/column-fill/ – meuwka Jan 21 '15 at 19:23

0 Answers0