foundation / foundation-sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.
https://get.foundation
MIT License
29.67k stars 5.48k forks source link

XY Grids with grid-margin-x causing horizontal scroll, flush to container and viewport #10297

Closed stuartstarrs closed 7 years ago

stuartstarrs commented 7 years ago

In the new XY Grid, there may be need to nest grids, with grid-margin-x applied to all. The margins of the nested grid(s) go out of the bounds of the parent grid, and any grid-container that might be wrapped in. If flush against the viewport edge, this will result in a horizontal scrollbar.

How to reproduce this bug:

  1. Add a grid-x with grid-margin-x to a margin:0 and padding: 0
  2. Add a nested grid-x with grid-margin-x inside
  3. Resize your viewport to, say, 1150px and see the nested grid is 1180px with default gutters

What should happen:

Margins being margins aside, grid-container should probably contain everything

Codepen

https://codepen.io/stuartstarrs/pen/EXQaMB