Last Updated: February 25, 2016
·
641
· joecritch

Stacking fluid grids

Here's a quick example of the best way to stack fluid grids

This alleviates the issue of whether you have a vertical margin on blocks or not within your responsive designs.

By coupling a negative margin on the container, with an opposing equal value margin on the child items, you'll have no top surrounding the elements, no matter what the screen resolution.

.block-group { overflow: hidden; margin: -3em 0 0 -3em; }
.block-group > li { float: left; margin: 3em 0 0 3em; }

Demo: http://codepen.io/joecritch/pen/qyhAp