Why does a 3 column layout fail so hard?

Question

In the first snippet, you should see 4 images grouped to just the left 2 columns:
[+][+][ ]
[+][+]

and not spread across all 3 columns as I would have expected:
[+][+][+]
[+]

Worse yet, even 3 items in a 3 column layout fails! I get this in Chrome:
[+][+][ ]
[+]

instead of this (which seems obvious):
[+][+][+]

Dear God why? Is it a bug? Or is it that the height of the column is not explicitly set? Explicit height would be a poor requirement of columns as far as fluid/dynamic content is concerned (which is my case).

4 items in 3 columns (fails in Chrome and Firefox)

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x250">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x250">
</p>

3 items in 3 columns (fails in Chrome)

p{
  -moz-column-count: 3;
  column-count: 3;
  -moz-column-gap: 0;
  column-gap: 0;
  -moz-column-fill: balance;
  column-fill: balance;
  outline:1px solid gray;
}

img{
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: top;
  padding: 4px;
  box-sizing: border-box;
}

<p>
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
  <img src="http://placehold.it/300x300">
</p>

https://jsfiddle.net/5wrpcky9/

Your fiddle is failing on me for some reason, but when I was able to play with it, I adjusted the height of the `p` element and that was able to push it over to the third column, very strange behavior. Once fiddle works again for me, I'll keep looking — ntgCleaner, Dec 02 '16 at 20:05
Columns are buggy right now in chrome. Please read "Known Issues" http://caniuse.com/#feat=multicolumn — ntgCleaner, Dec 02 '16 at 20:09
Have you read my edited answer and looked at the included examples? The explanation is there... — Johannes, Dec 03 '16 at 00:04
@Johannes thanks for your input. Yes, I've checked your answer, but it doesn't really hold up regarding my second snippet, right? 3 items in 3 columns - there is no uneven distribution of content there... see above... Thoughts? Also, `column-fill: balance` is supposed to address uneven items split so unevenly... — calipoop, Dec 03 '16 at 00:10
yes, because they all have the same height, so they can be distributed evenly. If you change the size of the first image (like here: http://codepen.io/anon/pen/oYExVK), it's 2/1/0 (additionally the sizes in your example are all scaled to the same width, so height are actually different than written) — Johannes, Dec 03 '16 at 00:15
My point with the 2nd snippet is that the 3 items are NOT distributed evenly - on Chrome at least. 3 same size images should obviously be placed one in each of 3 columns, right? Perhaps, the real bug is with Chrome - please test there... — calipoop, Dec 03 '16 at 00:24

Johannes · Answer 1 · 2016-12-03T14:56:30.290

1

(edit: added some more examples)

CSS column-count means that the content is put first into the first row (below each other), then into the second column and then into the third (and so forth, if there are more). I.e. a vertically oriented order of placement.

The height of the containing element (in your case the p tag) is dynamically determined by the content - the content is split evenly across all columns as much as possible, which in your case isn't really possible - 4 images in three columns, threfore the uneven distribution of content. Look at this variation of your fiddle, where I made the fourth image a bit higher, causing the fourth image to go into the third column: https://jsfiddle.net/r002yvv3/

Try to use six images, then you'll see what I mean. (https://jsfiddle.net/f7k4fph2/1/). You see that even better if you just use some text, see this example: https://jsfiddle.net/p00syos5/

For what you want to achieve you better use float:left on the images instead of column-count in the paragraph. (https://jsfiddle.net/euuvf00z/1/) But in this case the heights should match...

And one more note: In real life you wouldn't assign the column properties to a p tag, but to a div container into which you put p blocks, images etc: https://jsfiddle.net/ygpk8pkc/

edited Dec 03 '16 at 14:56

answered Dec 02 '16 at 23:38

Johannes

64,305
18
73
130

1

I'm not sure if that's quite true. When you say "as much as the height will allow", how is that height determined? here, it's just a `
` without a specified height.
– andi Dec 02 '16 at 23:48
1

I understand how `column-count` is supposed to work, however - `column-fill` is supposed to be initially set to 'balance', which suggests to me all 3 columns should be filled. I explicitly added `column-fill` to the code snippet to demonstrate that it too fails, whether balance is default or not... https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill – calipoop Dec 02 '16 at 23:50
Sorry, that was written in an unclear way (answer changed): The height of the containing element (in you case the `p` tag) is determined by the content - the content is split evenly across all columns as much as possible, which in your case isn't really possible - 4 images in three columns, threfore the uneven distribution of content. – Johannes Dec 02 '16 at 23:53
Your fiddle showing the fourth image with larger height only works on Firefox for me. On Chrome, all 4 are still in the left-two columns... – calipoop Dec 03 '16 at 00:18

score -2 · Answer 2 · answered Dec 02 '16 at 20:01

-2

U can try something like this:

<html>
 <head>
  <style>
   p{
       -moz-column-count: 3;
       column-count: 3;
       -moz-column-gap: 0;
       column-gap: 0;
   }

   img{
    float: left; /*add*/
       display: inline-block;
       width: 100%;
       height: auto;
       vertical-align: top;
       padding: 4px;
       box-sizing: border-box;
   }

  </style>
 </head>
 
 <body>
  <p>
      <img src="http://placehold.it/300x250">
      <img src="http://placehold.it/300x300">
      <img src="http://placehold.it/300x300">
  </p>

  <p>
      <img src="http://placehold.it/300x250">
  </p>
 </body>
</html>

answered Dec 02 '16 at 20:01

Wilson de Freitas Jr.

77
5

I'm sure the whole point is to not do this and control the number of elements in the number of columns depending on window size and media queries. – ntgCleaner Dec 02 '16 at 20:04
Also with different sized heights in each column, this would defeat the purpose of columns, it would have an undesired gap between certain elements – ntgCleaner Dec 02 '16 at 20:11
@ntgCleaner u r absolutely right, I didn't think this way. One thing that I didn't understand is if you change the position of img tags putting 300x250 img tags together (this float: left) its work... – Wilson de Freitas Jr. Dec 02 '16 at 20:16
1

Float left only works well when you are using exactly the same sized elements together. Otherwise there will be an awful gap when the last element to the right is taller than the next element on the next line on the left. Float is really great for similar elements – ntgCleaner Dec 02 '16 at 20:20

Why does a 3 column layout fail so hard?

2 Answers2

Linked