Skip to content

Commit

Permalink
[css-grid-3][masonry] Simplify alignment description now that align/j…
Browse files Browse the repository at this point in the history
…ustify-tracks were removed.
  • Loading branch information
fantasai committed May 13, 2024
1 parent f62c438 commit 0d566d5
Showing 1 changed file with 8 additions and 12 deletions.
20 changes: 8 additions & 12 deletions css-grid-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -485,9 +485,8 @@ Alignment and Spacing</h2>
[[css-align-3#content-distribution|content-distribution]] is applied
to the content as a whole, similarly to how it behaves in block containers.
More specifically, the <a>alignment subject</a> is the <dfn>masonry box</dfn>,
which is the area between the [=content edge=] of the [=grid container=]
and the [=end=] [=margin edge=] of the item that is the furthest away in the [=masonry axis=],
as indicated by the dashed border here:
which is the smallest rectangle bounding
the [=margin boxes=] of all the [=grid items=].

<figure>
<img src="images/masonry-box.png">
Expand All @@ -497,22 +496,19 @@ Alignment and Spacing</h2>
</figcaption>
</figure>

Note that there is only ever one <a>alignment subject</a>
Note: There is only ever one <a>alignment subject</a>
for these properties in the [=masonry axis=],
so the unique 'align-content' / 'justify-content' values boil down to
''align-content/start'',
''align-content/center'',
''align-content/end'',
''align-content/stretch''
and [=baseline alignment=].
(''align-content/normal'' behaves as ''align-content/stretch'' as usual for [=grid containers=].)
In the figure above, the [=grid container=] has ''align-content: start'';
but if ''align-content'' were at its default ''align-content/normal'' value,
then the [=masonry box=] would fill the [=grid container=]'s content box,
due to being stretched.
Moreover: if the grid items overflowed
(The behavior of ''align-content/normal'' and ''align-content/stretch''
is identical to ''align-content/start'',
and the [=distributed alignment=] values behave as their [=fallback alignments=].)
If the [=grid items=] overflow
the [=grid container=]'s [=content box=] in the [=masonry axis=],
then the [=masonry box=] would be larger than the [=grid container=]'s [=content box=].
then the [=masonry box=] will be larger than the [=grid container=]'s [=content box=].

<h3 id="masonry-axis-baseline-alignment">
Baseline Alignment in the Masonry Axis</h3>
Expand Down

0 comments on commit 0d566d5

Please sign in to comment.