zurb/foundation — pull request #4315 by alandaguegreene (2014-02-02 06:07:37+00:00)
Title: Allow block grids to align to column grid without extending beyond

Adds option to align block grids with the main grid, but not extend into the gutters. This allows for adding top and bottom borders to block grid list items without the borders extending seemingly outside of the content area.

Comparison image:
![aligned-block-grid](https://f.cloud.github.com/assets/2132519/2059752/3d79026a-8bd0-11e3-892a-9cae62d76f50.png)

If you add a top or bottom border (or a background color) to block grid list items in the current implementation, the borders (or background) will extend beyond the apparent edges of the content area, due to the padding and negative margins used to align block grid list items to the visual edges of the content area.

This new method changes all of the padding between block grid list items, so that they do not extend beyond the apparent edges of the content, but remain evenly spaced, butted up against one another, and aligned with the main column grid.

Merely removing the padding and negative margin on the outer edges of the block grid is not sufficient, as this would require the first and last elements in a block grid row to have a different width than the other elements. Since the widths are based on percentages, this is not a viable option. Therefore, each element in the block grid gets its own left and right padding, which is calculated automatically based on the number of elements in a row, and the index of the current element.

To be clear, this essentially nudges around the gutters between each element, so placing vertical borders between block grid list items would reveal some very peculiar spacing in the gutters. However, since vertical borders in grids are far less prevalent, and since a design is likely to use either vertical or horizontal borders, this provides an option for choosing which method fits an existing design language.