@@ -438,6 +438,7 @@ Declaring the Grid</h3>
438
438
@media print {
439
439
main {
440
440
grid: auto-flow 1fr / repeat(auto-fill, 5em);
441
+ }
441
442
}
442
443
</pre>
443
444
<li>
@@ -490,11 +491,11 @@ Placing Items</h3>
490
491
491
492
They can further be decomposed into the 'grid-row-start' /'grid-row-end' /'grid-column-start' /'grid-column-end' longhands, e.g.
492
493
<pre>
493
- grid-area: a; →
494
- grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a;
494
+ grid-area: a;
495
+ /* Equivalent to grid-row-start: a; grid-column-start: a; grid-row-end: a; grid-column-end: a; */
495
496
496
- grid-area: 1 / 3 / -1; →
497
- grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto;
497
+ grid-area: 1 / 3 / -1;
498
+ /* Equivalent to grid-row-start: 1; grid-column-start: 3; grid-row-end: -1; grid-column-end: auto; */
498
499
</pre>
499
500
</div>
500
501
@@ -2507,7 +2508,7 @@ Numeric Indexes and Spans</h4>
2507
2508
.two {
2508
2509
grid-row: 2; /* Place item in the second row. */
2509
2510
grid-column: 3; /* Place item in the third column. */
2510
- /* Equivalent to grid-area: 2 / 3;
2511
+ /* Equivalent to grid-area: 2 / 3; */
2511
2512
}
2512
2513
</pre>
2513
2514
</div>
@@ -3379,7 +3380,8 @@ Aligning the Grid: the 'justify-content' and 'align-content' properties</h3>
3379
3380
<pre>
3380
3381
.wrapper {
3381
3382
display: grid;
3382
- … 4-column / 3-row grid container …
3383
+ /* 3-row / 4-column grid container */
3384
+ grid: repeat(3, auto) / repeat(4, auto);
3383
3385
grid-gap: 10px;
3384
3386
align-content: space-around;
3385
3387
justify-content: space-between;
0 commit comments