Skip to content

Commit

Permalink
[css-grid-1][masonry] Remove align/justify-tracks from baseline align…
Browse files Browse the repository at this point in the history
…ment

But see also #9530 for open questions.
  • Loading branch information
fantasai committed Oct 27, 2023
1 parent b74679e commit 17efbc1
Showing 1 changed file with 7 additions and 54 deletions.
61 changes: 7 additions & 54 deletions css-grid-3/Overview.bs
Original file line number Diff line number Diff line change
Expand Up @@ -521,62 +521,15 @@ Baseline Alignment in the Masonry Axis</h3>
and the [=grid container=]'s baseline is determined
the same as for a regular [=grid container=] in that axis.

[=Baseline alignment=] is supported also in the [=masonry axis=],
on the first and last item in each track
(but not on items "in the middle" of the track).
Only tracks with the 'align-tracks' / 'justify-tracks' values
''align-tracks/start'', ''align-tracks/end'' or ''align-tracks/stretch''
support baseline alignment.
There are four different sets of [=baseline-sharing groups=]:
[=Baseline alignment=] is not supported in the [=masonry axis=].
The first baseline set of the [=grid container=] in this axis
is generated from the [=alignment baseline=] of
the first [=grid item=] in the first occupied track,
and the last baseline set from the last [=grid item=] placed.

<ol>
<li>the first item in each ''align-tracks/start'' track
+ the first item in each ''align-tracks/stretch'' track
<li>the last item in each ''align-tracks/start'' track
<li>the first item in each ''align-tracks/end'' track
<li>the last item in each ''align-tracks/end'' track
+ the last item in each ''align-tracks/stretch'' track
</ol>

Each of those sets can have a [=first baseline set=] and a [=last baseline set=],
resulting in eight unique baseline sets in the [=masonry axis=].

ISSUE: specify how the grid container's first(last) baseline in the [=masonry axis=] is determined

<div class="example">
Here's an <a href="examples/masonry-axis-baseline-alignment-1.html">example</a>
illustrating all eight possibilities.
(The example uses two separate [=grid containers=] to illustrate
the first ("F") and last ("L") baseline sets
to avoid cluttering the illustration,
but it is possible to use all eight sets in the same container.)
The aligned baselines are indicated with red color.
Note that the tracks that are attached to the end side of the [=masonry box=]
adjust the padding (or margin in the case of 'align-self') on the end side,
whereas tracks attached to the start side adjust the start padding/margin.
(Only 'align-content' is used in this example, which adjusts the padding,
since it's easier to see the baseline adjustment.
'align-self' can also be used, or a mix of the two, as usual.)

<figure>
<img src="images/masonry-axis-baseline-alignment-1.png">
<figcaption>
The rendering of the example above.
</figcaption>
</figure>
</div>


ISSUE: this needs more details about edge cases, caveat about misalignment in stretch, etc

Advisement: Authors are advised to be careful with using
alignment values other than ''align-tracks/start''
when some items span more than one track,
because it's easy to cause items to unintentionally overlap in this case.
ISSUE: We could support baseline alignment in the first row. Do we want to?

ISSUE: maybe we can make stretch alignment (at least) smarter
so that we avoid overlapping spanning items
in a few more cases that would be useful to authors?
ISSUE: Should the last baseline come from the last lowest item placed instead?

<h2 id="pagination">
Fragmentation</h2>
Expand Down

0 comments on commit 17efbc1

Please sign in to comment.