Re: [csswg-drafts] [css-grid] (editorial) Add example showing difference between grid-gap and a gutter

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: 
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:


**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 
using your GitHub account

Received on Wednesday, 11 January 2017 22:31:46 UTC