[css-grid] indent all examples properly

Author: tabatkins

css-grid/Overview.bs

@@ -453,30 +453,30 @@ Grid Lines</h3>
 
 		<pre>
 			&lt;style type="text/css">
-			  #grid {
+			#grid {
 				display: grid;
 				grid-template-columns: 150px 1fr;
 				grid-template-rows: 50px 1fr 50px
-			  }
+			}
 
-			  #item1 { grid-column: 2;
-					   grid-row-start: 1; grid-row-end: 4; }
+			#item1 { grid-column: 2;
+			         grid-row-start: 1; grid-row-end: 4; }
 			&lt;/style>
 		</pre>
 
 		<pre>
 			&lt;style type="text/css">
-			  /* equivalent layout to the prior example, but using named lines */
-			  #grid {
+			/* equivalent layout to the prior example, but using named lines */
+			#grid {
 				display: grid;
 				grid-template-columns: 150px (item1-start) 1fr (item1-end);
 				grid-template-rows: (item1-start) 50px 1fr 50px (item1-end);
-			  }
+			}
 
-			  #item1 {
+			#item1 {
 				grid-column: item1-start / item1-end;
 				grid-row: item1-start / item1-end
-			  }
+			}
 			&lt;/style>
 		</pre>
 	</div>
@@ -496,25 +496,25 @@ Grid Areas</h3>
 	<div class="example">
 		<pre>
 			&lt;style type="text/css">
-			  /* using the template syntax */
-			  #grid  {
-			  display: grid;
-			  grid-template-areas: ". a"
-								   "b a"
-								   ". a";
-			  grid-template-columns: 150px 1fr;
-			  grid-template-rows: 50px 1fr 50px
-			  }
-
-			  #item1 { grid-area: a }
-			  #item2 { grid-area: b }
-			  #item3 { grid-area: b }
-
-			  /* Align items 2 and 3 at different points in the Grid Area "b".  */
-			  /* By default, Grid Items are stretched to fit their Grid Area    */
-			  /* and these items would layer one over the other. */
-			  #item2 { align-self: start }
-			  #item3 { justify-self: end; align-self: end }
+			/* using the template syntax */
+			#grid  {
+			display: grid;
+			grid-template-areas: ". a"
+			                     "b a"
+			                     ". a";
+			grid-template-columns: 150px 1fr;
+			grid-template-rows: 50px 1fr 50px
+			}
+
+			#item1 { grid-area: a }
+			#item2 { grid-area: b }
+			#item3 { grid-area: b }
+
+			/* Align items 2 and 3 at different points in the Grid Area "b".  */
+			/* By default, Grid Items are stretched to fit their Grid Area    */
+			/* and these items would layer one over the other. */
+			#item2 { align-self: start }
+			#item3 { justify-self: end; align-self: end }
 			&lt;/style>
 		</pre>
 	</div>
@@ -780,25 +780,25 @@ Z-axis Ordering: the 'z-index' property</h3>
 
 		<pre>
 			&lt;style type="text/css">
-			  #grid {
+			#grid {
 				display: grid;
 				grid-template-columns: 1fr 1fr;
 				grid-template-rows: 1fr 1fr
-			  }
-			  #A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
-			  #B { grid-column: 1; grid-row: 1; z-index: 10; }
-			  #C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
-			  #D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
-			  #E { grid-column: 1 / span 2; grid-row: 1 / span 2;
-				   z-index: 5; justify-self: center; align-self: center; }
+			}
+			#A { grid-column: 1 / span 2; grid-row: 2; align-self: end; }
+			#B { grid-column: 1; grid-row: 1; z-index: 10; }
+			#C { grid-column: 2; grid-row: 1; align-self: start; margin-left: -20px; }
+			#D { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; }
+			#E { grid-column: 1 / span 2; grid-row: 1 / span 2;
+			     z-index: 5; justify-self: center; align-self: center; }
 			&lt;/style>
 
 			&lt;div id="grid">
-			  &lt;div id="A">A&lt;/div>
-			  &lt;div id="B">B&lt;/div>
-			  &lt;div id="C">C&lt;/div>
-			  &lt;div id="D">D&lt;/div>
-			  &lt;div id="E">E&lt;/div>
+				&lt;div id="A">A&lt;/div>
+				&lt;div id="B">B&lt;/div>
+				&lt;div id="C">C&lt;/div>
+				&lt;div id="D">D&lt;/div>
+				&lt;div id="E">E&lt;/div>
 			&lt;/div>
 		</pre>
 	</div>
@@ -1009,11 +1009,11 @@ Named Grid Lines: the <css>(<<custom-ident>>*)</css> syntax</h4>
 
 		<pre>
 			&lt;style>
-			  #grid {
+			#grid {
 				display: grid;
 				grid-template-columns: (first nav) 150px (main) 1fr (last);
 				grid-template-rows: (first header) 50px (main) 1fr (footer) 50px (last);
-			  }
+			}
 			&lt;/style>
 		</pre>
 
@@ -1067,21 +1067,21 @@ Repeating Rows and Columns: the ''repeat()'' notation</h4>
 
 		<pre>
 			&lt;style>
-			  #grid {
+			#grid {
 				display: grid;
 				grid-template-columns: 10px (col-start) 250px (col-end)
-									   10px (col-start) 250px (col-end)
-									   10px (col-start) 250px (col-end)
-									   10px (col-start) 250px (col-end) 10px;
+				                       10px (col-start) 250px (col-end)
+				                       10px (col-start) 250px (col-end)
+				                       10px (col-start) 250px (col-end) 10px;
 				grid-template-rows: 1fr;
-			  }
+			}
 
-			  /* Equivalent definition. */
-			  #grid {
+			/* Equivalent definition. */
+			#grid {
 				display: grid;
 				grid-template-columns: repeat(4, 10px (col-start) 250px (col-end)) 10px;
 				grid-template-rows: 1fr;
-			  }
+			}
 			&lt;/style>
 		</pre>
 	</div>
@@ -1326,14 +1326,14 @@ Resolved Values</h4>
 	<div class="example">
 		<pre>
 			&lt;style>
-			  #grid {
+			#grid {
 				width: 500px;
 				grid-template-columns:
 				  (a)     auto
 				  (b)     minmax(min-content, 1fr)
 				  (b c d) repeat(2, (e) 40px)
-						  repeat(5, auto);
-			  }
+				          repeat(5, auto);
+			}
 			&lt;/style>
 			&lt;div id="grid">
 			  &lt;div style="grid-column-start:1; width:50px">&lt;/div>
@@ -1462,16 +1462,16 @@ Named Areas: the 'grid-template-areas' property</h3>
 
 		<pre>
 			&lt;style type="text/css">
-			  #grid {
+			#grid {
 				display: grid;
 				grid-template-areas: "head head"
-									 "nav  main"
-									 "foot .   "
-			  }
-			  #grid > header { grid-area: head; }
-			  #grid > nav    { grid-area: nav; }
-			  #grid > main   { grid-area: main; }
-			  #grid > footer { grid-area: foot; }
+				                     "nav  main"
+				                     "foot .   "
+			}
+			#grid > header { grid-area: head; }
+			#grid > nav    { grid-area: nav; }
+			#grid > main   { grid-area: main; }
+			#grid > footer { grid-area: foot; }
 			&lt;/style>
 		</pre>
 	</div>
@@ -1765,78 +1765,78 @@ Sizing Auto-generated Rows and Columns: the 'grid-auto-rows' and 'grid-auto-colu
 
 		<pre>
 			&lt;style type="text/css">
-			  form {
+			form {
 				display: grid;
 				/* Define three columns, all content-sized,
 				   and name the corresponding lines. */
 				grid-template-columns: (labels) auto (controls) auto (oversized) auto;
 				grid-auto-flow: row;
-			  }
-			  form > label {
+			}
+			form > label {
 				/* Place all labels in the "labels" column and
 				   automatically find the next available row. */
 				grid-column: labels;
 				grid-row: auto;
-			  }
-			  form > input, form > select {
+			}
+			form > input, form > select {
 				/* Place all controls in the "controls" column and
 				   automatically find the next available row. */
 				grid-column: controls;
 				grid-row: auto;
-			  }
+			}
 
-			  #department {
+			#department {
 				/* Auto place this item in the "oversized" column
 				   in the first row where an area that spans three rows
 				   won't overlap other explicitly placed items or areas
 				   or any items automatically placed prior to this area. */
 				grid-column: oversized;
 				grid-row: span 3;
-			  }
+			}
 
-			  /* Place all the buttons of the form
-				 in the explicitly defined grid area. */
-			  #buttons {
+			/* Place all the buttons of the form
+			   in the explicitly defined grid area. */
+			#buttons {
 				grid-row: auto;
 
 				/* Ensure the button area spans the entire grid element
 				   in the row axis. */
 				grid-column: 1 / -1;
 				text-align: end;
-			  }
+			}
 			&lt;/style>
 			&lt;form>
-			  &lt;label for="firstname">First name:&lt;/label>
-			  &lt;input type="text" id="firstname" name="firstname" />
-			  &lt;label for="lastname">Last name:&lt;/label>
-			  &lt;input type="text" id="lastname" name="lastname" />
-			  &lt;label for="address">Address:&lt;/label>
-			  &lt;input type="text" id="address" name="address" />
-			  &lt;label for="address2">Address 2:&lt;/label>
-			  &lt;input type="text" id="address2" name="address2" />
-			  &lt;label for="city">City:&lt;/label>
-			  &lt;input type="text" id="city" name="city" />
-			  &lt;label for="state">State:&lt;/label>
-			  &lt;select type="text" id="state" name="state">
-				&lt;option value="WA">Washington&lt;/option>
-			  &lt;/select>
-			  &lt;label for="zip">Zip:&lt;/label>
-			  &lt;input type="text" id="zip" name="zip" />
-
-			  &lt;div id="department">
-				&lt;label for="department">Department:&lt;/label>
-				&lt;select id="department" name="department" multiple>
-				  &lt;option value="finance">Finance&lt;/option>
-				  &lt;option value="humanresources">Human Resources&lt;/option>
-				  &lt;option value="marketing">Marketing&lt;/option>
+				&lt;label for="firstname">First name:&lt;/label>
+				&lt;input type="text" id="firstname" name="firstname" />
+				&lt;label for="lastname">Last name:&lt;/label>
+				&lt;input type="text" id="lastname" name="lastname" />
+				&lt;label for="address">Address:&lt;/label>
+				&lt;input type="text" id="address" name="address" />
+				&lt;label for="address2">Address 2:&lt;/label>
+				&lt;input type="text" id="address2" name="address2" />
+				&lt;label for="city">City:&lt;/label>
+				&lt;input type="text" id="city" name="city" />
+				&lt;label for="state">State:&lt;/label>
+				&lt;select type="text" id="state" name="state">
+					&lt;option value="WA">Washington&lt;/option>
 				&lt;/select>
-			  &lt;/div>
-
-			  &lt;div id="buttons">
-				&lt;button id="cancel">Cancel&lt;/button>
-				&lt;button id="back">Back&lt;/button>
-				&lt;button id="next">Next&lt;/button>
-			  &lt;/div>
+				&lt;label for="zip">Zip:&lt;/label>
+				&lt;input type="text" id="zip" name="zip" />
+
+				&lt;div id="department">
+					&lt;label for="department">Department:&lt;/label>
+					&lt;select id="department" name="department" multiple>
+						&lt;option value="finance">Finance&lt;/option>
+						&lt;option value="humanresources">Human Resources&lt;/option>
+						&lt;option value="marketing">Marketing&lt;/option>
+					&lt;/select>
+				&lt;/div>
+
+				&lt;div id="buttons">
+					&lt;button id="cancel">Cancel&lt;/button>
+					&lt;button id="back">Back&lt;/button>
+					&lt;button id="next">Next&lt;/button>
+				&lt;/div>
 			&lt;/form>
 		</pre>
 	</div>