[css-grid] Issue 7 Add example of fixed size spanner getting extra space from content distribution

[rachelandrew]

11.5. Aligning the Grid

I was working on some examples and built this which may be a good example for this section.

gist
CodePen

I have a grid container sized in absolute units, with grid tracks also sized using absolute units. The sum of the tracks in both directions is smaller than the container.

Using the keyword values space-around and space-between increases the spacing between tracks. Any grid area that spans one of these gaps thus gains width or height as the space is added to the total width/height.

[tabatkins]

Nice, that looks great. I assume that first one is using gutters to produce the small constant spacing?

[rachelandrew]

Yes - I thought it might make it more obvious that the spacing also increases the desired absolute gap.

[tabatkins]

Makes sense. I'll just need to convert this to SVG and embed it - thanks for the example!

[fantasai]

Added in commit 22b395c ! Thanks so much~ @tabatkins can convert it to SVG whenever he gets around to it, imho it's more important to have an image than an SVG image. ;)