grid-gap affecting overall width of grid?

[bradryanbice]

As is displayed here: http://codepen.io/bradbice/pen/pRWZrP my grid is pushing out beyond it's max-width thanks to the grid-gap values compounding. The empty box below the grid of photos is the correct max-width. The photo grid is introducing a scroll bar on narrower viewports.

I was under the impression that grid-gap would not affect overall width. Would something else be affecting it? box-sizing properties don't seem to matter.

[rachelandrew]

a grid-gap is treated like a track, so you have created a grid wider than 100%.

Use the fraction unit for your tracks instead as that shares a fraction of the available space.

http://codepen.io/rachelandrew/pen/MJEBZV

[bradryanbice]

@rachelandrew That's it! I knew it was something simple and I was forgetting something. Thank you!