I've been experimenting with CSS column count to create a masonry effect for my items.
Everything was going smoothly until I added a subtle drop shadow to the items. Upon closer inspection in the jsfiddle link provided, you'll notice that the drop shadows at the bottom of the container seem to be clipped from the tops of some items.
I've attempted adding a top margin to the items to fix this issue, but my efforts have been unsuccessful. Where am I making a mistake?
The problem lies in the three lines under the last items.
Jsfiddle Link: http://jsfiddle.net/DTcHh/3930/
Backup code:
.cols {
-moz-column-count:4;
-moz-column-gap: 3%;
-moz-column-width: 25%;
-webkit-column-count:4;
-webkit-column-gap: 3%;
-webkit-column-width: 25%;
column-count: 4;
column-gap: 3%;
column-width: 25%;
}
.item {
height: auto;
width: 100%;
-webkit-column-break-inside: avoid;
-o-column-break-inside: avoid;
-moz-column-break-inside: avoid;
break-inside: avoid;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}