3

The Problem

Using the CSS column-property to create columns on a page I am noticing some weird behavior of the layouting engine. Namely, I am using

body {
  padding: 0;
  background-color: black;
  margin: 0;

  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

So that every column should be 308px wide. My demo page looks perfectly normal, except for when viewed at about 2400px width. Then it looks like this:

2400px

Note the large black space in the very last column. My math tells me 2400 / 308 = 7.79 > 7. One would expect seven columns to be present at 2400px viewport width. However only six are used by the layouting engine. This behavior is consistent between chrome and firefox and even persists, when replacing column-width: 308px with column-count: 7.

The Question

I would like to know what causes the browser to ignore the 7th column at exactly this width. Is there a way to avoid this behavior?

The Code

The problem can be reproduced using the following source or this fiddle

body {
  padding: 0;
  background-color: black;
  margin: 0;
  column-width: 308px;
  column-gap: 0;
  column-rule: none;
  line-height: 0;
}

img {
  margin: 12px;
  padding: 9px;
  border: 1px solid darkgrey;
  background-color: white;
  display: inline-block;
  width: 264px;
}

.w {
  height: 176px;
}

.h {
  height: 396px;
}
<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="h">
<img class="w">
<img class="w">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">

<img class="w">
<img class="w">
<img class="w">
<img class="w">
<img class="h">
TylerH
  • 20,799
  • 66
  • 75
  • 101
niklasfi
  • 15,245
  • 7
  • 40
  • 54

2 Answers2

2

I answered a similar question here a few days ago: https://stackoverflow.com/a/46412808/5641669

However, I want to add something:

If the height of the container isn't fixed, the distribution of the items/text into columns always depends on the height of the first column. In your case, if the last item in your first column would be moved to the second column, the other columns would be less high (since they adjust their height according to the first column), so the items altogether wouldn't fit into 7 columns -> not possible.

So that fourth item is put into the first row to make it possible that all items fit into the number of columns defined by column-count. In this case, this results in only six colums having items in them, but 7 columns being there.

As I wrote before, the height of the whole container will always depend on the first column (i.e. if the height isn't fixed). The rest of the columns will just be filled according to that height (they won't get any higher than the first one), not according to an even distribution if items to the rest of the columns. Therefore, sometime the result can be a situation like yours, where the last column remains empty.

Johannes
  • 64,305
  • 18
  • 73
  • 130
0

As stated, this behavior is expected because of how columns work. But you can workaround this issue, you have to test it in all scenarios though. Especially if you have a dynamic number of items.

@media screen and (min-width: 2400px) and (max-width: #something#) {
  body {
    column-gap: 100px; /* adjust to your needs */
  }
}

This solution does not handle all cases but it can be a workaround for a very specific case.

Maybe you should lay out your content in another way... Perhaps you should look into layout libraries like Masonry f. i. It may seem too much but it solves many problems: https://masonry.desandro.com

elvirus
  • 123
  • 5