@@ -180,18 +180,18 @@ Adapting Layouts to Available Space</h3>
180180 /* Three rows: the first and last sized to content, the middle
181181 * row receives the remaining space, but is never smaller than
182182 * the minimum height of the board or stats areas. */
183- grid-template-rows: auto 1fr auto
183+ grid-template-rows: auto 1fr auto;
184184 }
185185
186186 /* Each part of the game is positioned between grid lines by
187187 * referencing the starting grid line and then specifying, if more
188188 * than one, the number of rows or columns spanned to determine
189189 * the ending grid line, which establishes bounds for the part. */
190- #title { grid-column: 1; grid-row: 1 }
191- #score { grid-column: 1; grid-row: 3 }
192- #stats { grid-column: 1; grid-row: 2; align-self: start }
190+ #title { grid-column: 1; grid-row: 1; }
191+ #score { grid-column: 1; grid-row: 3; }
192+ #stats { grid-column: 1; grid-row: 2; align-self: start; }
193193 #board { grid-column: 2; grid-row: 1 / span 2; }
194- #controls { grid-column: 2; grid-row: 3; justify-self: center }
194+ #controls { grid-column: 2; grid-row: 3; justify-self: center; }
195195 </pre>
196196
197197 <pre class="lang-markup">
@@ -252,7 +252,7 @@ Source-Order Independence</h3>
252252 * assigned a sizing function with the grid-template-columns
253253 * and grid-template-rows properties. */
254254 grid-template-columns: auto 1fr;
255- grid-template-rows: auto auto 1fr auto
255+ grid-template-rows: auto auto 1fr auto;
256256 }
257257 }
258258
@@ -268,7 +268,7 @@ Source-Order Independence</h3>
268268 "score ctrls";
269269
270270 grid-template-columns: auto 1fr;
271- grid-template-rows: auto 1fr auto
271+ grid-template-rows: auto 1fr auto;
272272 }
273273 }
274274
@@ -356,17 +356,17 @@ Grid Layering of Elements</h3>
356356 * changes, but grid lines can also work with layered grid items
357357 * that have overlapping areas of different shapes like the thumb
358358 * and track parts in this example. */
359- #lower-label { grid-column-start: start }
360- #track { grid-column: track-start / track-end; justify-self: center }
359+ #lower-label { grid-column-start: start; }
360+ #track { grid-column: track-start / track-end; justify-self: center; }
361361 #upper-label { grid-column-end: end; }
362362
363363 /* Fill parts are drawn above the track so set z-index to 5. */
364364 #lower-fill { grid-column: track-start / fill-split;
365365 justify-self: end;
366- z-index: 5 }
366+ z-index: 5; }
367367 #upper-fill { grid-column: fill-split / track-end;
368368 justify-self: start;
369- z-index: 5 }
369+ z-index: 5; }
370370
371371 /* Thumb is the topmost part; assign it the highest z-index value. */
372372 #thumb { grid-column: thumb-start / thumb-end; z-index: 10 }
@@ -447,8 +447,8 @@ Grid Tracks and Cells</h3>
447447 <style type="text/css">
448448 #grid {
449449 display: grid;
450- grid-template-columns: 150px 1fr; /* two columns */
451- grid-template-rows: 50px 1fr 50px /* three rows */
450+ grid-template-columns: 150px 1fr; /* two columns */
451+ grid-template-rows: 50px 1fr 50px; /* three rows */
452452 }
453453 </style>
454454 </pre>
@@ -474,7 +474,7 @@ Grid Lines</h3>
474474 #grid {
475475 display: grid;
476476 grid-template-columns: 150px 1fr;
477- grid-template-rows: 50px 1fr 50px
477+ grid-template-rows: 50px 1fr 50px;
478478 }
479479
480480 #item1 { grid-column: 2;
@@ -493,7 +493,7 @@ Grid Lines</h3>
493493
494494 #item1 {
495495 grid-column: item1-start / item1-end;
496- grid-row: item1-start / item1-end
496+ grid-row: item1-start / item1-end;
497497 }
498498 </style>
499499 </pre>
@@ -521,7 +521,7 @@ Grid Areas</h3>
521521 "b a"
522522 ". a";
523523 grid-template-columns: 150px 1fr;
524- grid-template-rows: 50px 1fr 50px
524+ grid-template-rows: 50px 1fr 50px;
525525 }
526526
527527 #item1 { grid-area: a }
@@ -531,8 +531,8 @@ Grid Areas</h3>
531531 /* Align items 2 and 3 at different points in the Grid Area "b". */
532532 /* By default, Grid Items are stretched to fit their Grid Area */
533533 /* and these items would layer one over the other. */
534- #item2 { align-self: start }
535- #item3 { justify-self: end; align-self: end }
534+ #item2 { align-self: start; }
535+ #item3 { justify-self: end; align-self: end; }
536536 </style>
537537 </pre>
538538 </div>
@@ -1106,7 +1106,7 @@ Track Sizing: the 'grid-template-rows' and 'grid-template-columns' properties</h
11061106 /* examples of valid track definitions */
11071107 grid-template-rows: 1fr minmax(min-content, 1fr);
11081108 grid-template-rows: 10px repeat(2, 1fr auto minmax(30%, 1fr));
1109- grid-template-rows: calc(4em - 5px)
1109+ grid-template-rows: calc(4em - 5px);
11101110 </pre>
11111111 </div>
11121112
0 commit comments