Added example to grid-gap section (#1049)

* Added example to grid-gap section demonstrating difference between grid-gap and visible gutter

* Rephrase note for clarity.

Author: rachelandrew

css-grid/Overview.bs

@@ -3432,6 +3432,17 @@ Gutters: the 'grid-column-gap', 'grid-row-gap', and 'grid-gap' properties</h3>
 	If <<'grid-column-gap'>> is omitted,
 	it's set to the same value as <<'grid-row-gap'>>.
 
+	<div class='example'>
+		<figure>
+			<img src="images/gutters-gaps.svg" alt="A diagram showing how margins and padding add to the visible gutter size" width="500" height="616">
+		</figure>
+
+		Note: The 'grid-gap' property is only one component of the visible “gutter” or “alley” created between grid areas. 
+		Margins, padding, or the use of distributed alignment 
+		may increase the visible separation between grid items
+		beyond what is specified in 'grid-gap'. 
+	</div>
+
 <h3 id='auto-margins'>
 Aligning with <a value for="margin">auto</a> margins</h3>