@@ -485,9 +485,8 @@ Alignment and Spacing</h2>
485
485
[[css-align-3#content-distribution|content-distribution]] is applied
486
486
to the content as a whole, similarly to how it behaves in block containers.
487
487
More specifically, the <a>alignment subject</a> is the <dfn>masonry box</dfn> ,
488
- which is the area between the [=content edge=] of the [=grid container=]
489
- and the [=end=] [=margin edge=] of the item that is the furthest away in the [=masonry axis=] ,
490
- as indicated by the dashed border here:
488
+ which is the smallest rectangle bounding
489
+ the [=margin boxes=] of all the [=grid items=] .
491
490
492
491
<figure>
493
492
<img src="images/masonry-box.png">
@@ -497,22 +496,19 @@ Alignment and Spacing</h2>
497
496
</figcaption>
498
497
</figure>
499
498
500
- Note that there is only ever one <a>alignment subject</a>
499
+ Note: There is only ever one <a>alignment subject</a>
501
500
for these properties in the [=masonry axis=] ,
502
501
so the unique 'align-content' / 'justify-content' values boil down to
503
502
''align-content/start'' ,
504
503
''align-content/center'' ,
505
504
''align-content/end'' ,
506
- ''align-content/stretch''
507
505
and [=baseline alignment=] .
508
- (''align-content/normal'' behaves as ''align-content/stretch'' as usual for [=grid containers=] .)
509
- In the figure above, the [=grid container=] has ''align-content: start'' ;
510
- but if ''align-content'' were at its default ''align-content/normal'' value,
511
- then the [=masonry box=] would fill the [=grid container=] 's content box,
512
- due to being stretched.
513
- Moreover: if the grid items overflowed
506
+ (The behavior of ''align-content/normal'' and ''align-content/stretch''
507
+ is identical to ''align-content/start'' ,
508
+ and the [=distributed alignment=] values behave as their [=fallback alignments=] .)
509
+ If the [=grid items=] overflow
514
510
the [=grid container=] 's [=content box=] in the [=masonry axis=] ,
515
- then the [=masonry box=] would be larger than the [=grid container=] 's [=content box=] .
511
+ then the [=masonry box=] will be larger than the [=grid container=] 's [=content box=] .
516
512
517
513
<h3 id="masonry-axis-baseline-alignment">
518
514
Baseline Alignment in the Masonry Axis</h3>
0 commit comments