Home/ Questions/Q 7587199
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T19:36:47+00:00

I am trying to implement Chris Coyier’s example of using CSS columns to create

  • 0

I am trying to implement Chris Coyier’s example of using CSS columns to create a seamless responsive grid of images.

I put Chris’s files onto my server and everything looked fine. The only thing I changed was the actual images.

Now, as you see on my test page, there are only 4 columns of images instead of the specified 5, using column-count:5;. The fifth column is just whitespace with no content.

This only happens when the browser window is greater than 1200px. When the browser window is less than 1200px, the media queries kick in and decreases the column count 4, 3, 2, and finally 1. In other words, this bug only happens when the column-count: is 5 and up

This happens in FF 10, Chrome 17+, and Safari 5+.

Any help would be appreciated!

Here is the trimmed HTML:

<section id="photos">

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        <img src="images/iso_o.jpg" alt="Isometric"  />

        ...                     

</section>

Here is the untouched CSS:

* { margin: 0; padding: 0; }

#photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;

}
#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

@media (max-width: 1200px) {
  #photos {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
  #photos {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
  #photos {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
  #photos {
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok I have an answer, although it is a workaround, not a fix. I changed up the images so that some were 300px in height and others, 370px. Basically I varied the the height of the images and kept the width of all the images the same, 300px. So the answer is to either not use square images, or if you want to use all square images, use column-count:4 instead of 5.

    If anyone can provide further insight into why this happens that would be great.

    • 0