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