Exploring the column rule in CSS for a Pinterest-inspired layout has been a bit confusing. The results are not turning out as expected, and I suspect there might be an error in my approach.
One issue I've encountered is that when the number of child elements increases, the last column gets significantly disrupted. The elements from each column end up shifting to the bottom of the previous one, except for maybe the first or second row.
Furthermore, I notice a strange and large margin below the final row. It appears as if there's an invisible additional row at the end, even though there isn't.
Lastly, it seems like the columns fill up in an odd order. For instance, the 3rd element goes to the 3rd row while the 8th element is placed at the top.
Despite these challenges, the columns do seem to appropriately adjust their width based on the number of elements in the list.
An interesting observation is that removing the column-gap rule actually increases the space at the bottom of the page!
I'm wondering if there's a better way to consistently make sure the content always fills 100% of the width (with N rows as specified by column-count) and have the cells inserted from left to right before moving to the next row?
#posts{
width: 100%;
overflow: hidden;
-webkit-column-count: 4;
-webkit-column-gap: 1.875em; /* 30px */
-webkit-column-fill: auto;
-moz-column-count: 4;
column-gap: 1.875em;
-moz-column-gap: 1.875em; /* 30px */
-moz-column-fill: auto;
column-count: 4;
column-fill: auto;
}
.post{
display: inline-block;
margin-bottom: 1.875em;
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
}
HTML
<section id='posts' class='clearfix'>
<div class='post'>
<div class='top' style='background-image: url("http://lorempixel.com/400/300/sports/1")'></div>
<div class='bottom'>
<span class='title'>Lorem ipsum sit ament lorem lorem ipsum</span>
<span class='date'>em 15/08/2014</span>
</div>
<span class='category'>Lorem ipsum</span>
</div>
....
</section>
An example of an issue (there are multiple occurrences, this one occurs with columns-count: 4 and 6 items in the list)