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

[astearns]

It's come up more than once that grid-gap should perhaps be named grid-gutter, since that's a longstanding layout term. The association between grid-gap and gutters is reinforced in the prose and anchor as well https://drafts.csswg.org/css-grid/#gutters

We keep considering and rejecting the name change, in part because we would like to be consistent with column-gap. Another reason came up in the latest discussion: since the grid items on either side of a grid-gap may have margins and padding that contribute to white space, grid-gap may not be the only property that contributes to the visual gutter in a grid layout.

So in order to avoid future discussion over whether grid-gap or grid-gutter is more appropriate, we should add an example showing how grid-gap interacts with grid item margins and padding to produce a visual gutter in a grid layout, and the prose that currently equates a gutter with grid-gap should be restructured to indicate that grid-gap is merely one possible component in specifying a gutter.

[frivoal]

Agreed. And as noted during the conf call, the addition of this example is an editorial improvement that should not hold up progression along TR.

[rachelandrew]

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.

[astearns]

I think that more labels in the diagrams (here's the grid-gap, and here's the visual gutter) would help clarify the point of the example.

[rachelandrew]

I had another go at this here:

[fantasai]

I'm gonna let you and @astearns work this out. Send a PR when you're ready. :)

[astearns]

I already gave the change a thumbs up - I think it's ready.

[rachelandrew]

I missed the thumbs up as a form of notification :) I'll write some text to go along with it and submit a PR.

[rachelandrew]

This needs to go in at 11.1 I think, which would make the example 41. What is the process for this, do we just renumber following examples or will that cause a horrible mess? Let me know!

[fantasai]

You inline it into the Overview.bs source; the numbers are auto-generated by Bikeshed when it converts to HTML. You can look at other examples to see how the markup is; it's basically just <div class="example"> wrapped around everything that goes in the example.