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