The Challenge
While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling:
body {
padding: 0;
background-color: black;
margin: 0;
column-width: 308px;
column-gap: 0;
column-rule: none;
line-height: 0;
}
Everything appears normal on my demo page except when viewed at a width of around 2400px. At this width, an odd black space shows up in the last column, despite my calculations indicating that there should be seven columns instead of six.
This issue remains consistent across various browsers like Chrome and Firefox, even if I try switching column-width: 308px to column-count: 7.
The Inquiry
I am curious about what might be causing the browser to disregard the seventh column precisely at this width. Is there any workaround to prevent this unwanted behavior?
The Sample Code
To replicate the problem, refer to the provided source code or visit 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">
... (additional image elements)