CSS columns bug — 5 column count only showing 4 (with images)

Question

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 everyth

Answer 1

Just in case any one else finds this in their search results it's the fact the images are inline so they have a some space between them see:

How can I eliminate spacing between inline elements in CSS?

I use the font-size: 0 on the section to fix this :)

Answer 2

When my browser hits 1219 px wide (at least as Firesize tells me) I get 5 cols. Below that I get 4 as well. Firefox 10.

Some things that may be going on:

• My vertical scrollbar is exactly 19 px wide
• The border left and right of the Firefox window are 9 px each, making 18px total

It almost seems as one of these is being included in the media query.

---

Edit: kinda weird though, because at first glance the W3 media queries site seems to suggest that:

The ‘width’ media feature describes the width of the targeted display area of the output device. For continuous media, this is the width of the viewport (as described by CSS2, section 9.1.1 [CSS21]) including the size of a rendered scroll bar (if any)

Answer 3

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.