- From: Rachel Andrew via GitHub <sysbot+gh@w3.org>
- Date: Wed, 11 Jan 2017 22:31:39 +0000
- To: public-css-archive@w3.org
I had a go at creating this example. Image created in Sketch so can be exported as SVG. In researching this I found lots of references suggesting that gutter is really the gap around the page (to allow for binding etc.) and **alley** is the correct term for the gaps between columns - eg: http://www.brighthub.com/multimedia/publishing/articles/120579.aspx. However I have absolutely no print background, but no-one seems to be demanding we call them alleys. That may also be a reason to defend not switching away from `grid-gap`, what we have is different to print. We don't have gutters or alleys we have this gap, which is _like_ things we see in print but this being the web isn't quite. Anyway, a suggested example below: ![gutters-gaps](https://cloud.githubusercontent.com/assets/2764898/21869000/50f9d808-d80a-11e6-92ee-33bb3b1016c7.png) **Example 1: grid-gap of 60px** Two 1fr tracks will each become 260px allowing for the 60px gap. ~~~ .grid { width: 580px; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 200px; grid-gap: 60px; } ~~~ **Example 2: padding of 20px on child elements** ~~~ .grid > * { padding: 20px; } ~~~ The content area is now 220px. If there is no background colour on the tracks, the gap will appear to be 100px. **Example 3: padding of 20px and margin of 20px on child elements** ~~~ .grid > * { padding: 20px; Margin: 20px; } ~~~ The content area is now 180px. If there were no background colour on these tracks the gap will appear to be 140px. -- GitHub Notification of comment by rachelandrew Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/452#issuecomment-272016744 using your GitHub account
Received on Wednesday, 11 January 2017 22:31:46 UTC