Skip to content

Commit 17efbc1

Browse files
committed
[css-grid-1][masonry] Remove align/justify-tracks from baseline alignment
But see also #9530 for open questions.
1 parent b74679e commit 17efbc1

File tree

1 file changed

+7
-54
lines changed

1 file changed

+7
-54
lines changed

css-grid-3/Overview.bs

Lines changed: 7 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -521,62 +521,15 @@ Baseline Alignment in the Masonry Axis</h3>
521521
and the [=grid container=]'s baseline is determined
522522
the same as for a regular [=grid container=] in that axis.
523523

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

532-
<ol>
533-
<li>the first item in each ''align-tracks/start'' track
534-
+ the first item in each ''align-tracks/stretch'' track
535-
<li>the last item in each ''align-tracks/start'' track
536-
<li>the first item in each ''align-tracks/end'' track
537-
<li>the last item in each ''align-tracks/end'' track
538-
+ the last item in each ''align-tracks/stretch'' track
539-
</ol>
540-
541-
Each of those sets can have a [=first baseline set=] and a [=last baseline set=],
542-
resulting in eight unique baseline sets in the [=masonry axis=].
543-
544-
ISSUE: specify how the grid container's first(last) baseline in the [=masonry axis=] is determined
545-
546-
<div class="example">
547-
Here's an <a href="examples/masonry-axis-baseline-alignment-1.html">example</a>
548-
illustrating all eight possibilities.
549-
(The example uses two separate [=grid containers=] to illustrate
550-
the first ("F") and last ("L") baseline sets
551-
to avoid cluttering the illustration,
552-
but it is possible to use all eight sets in the same container.)
553-
The aligned baselines are indicated with red color.
554-
Note that the tracks that are attached to the end side of the [=masonry box=]
555-
adjust the padding (or margin in the case of 'align-self') on the end side,
556-
whereas tracks attached to the start side adjust the start padding/margin.
557-
(Only 'align-content' is used in this example, which adjusts the padding,
558-
since it's easier to see the baseline adjustment.
559-
'align-self' can also be used, or a mix of the two, as usual.)
560-
561-
<figure>
562-
<img src="images/masonry-axis-baseline-alignment-1.png">
563-
<figcaption>
564-
The rendering of the example above.
565-
</figcaption>
566-
</figure>
567-
</div>
568-
569-
570-
ISSUE: this needs more details about edge cases, caveat about misalignment in stretch, etc
571-
572-
Advisement: Authors are advised to be careful with using
573-
alignment values other than ''align-tracks/start''
574-
when some items span more than one track,
575-
because it's easy to cause items to unintentionally overlap in this case.
530+
ISSUE: We could support baseline alignment in the first row. Do we want to?
576531

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

581534
<h2 id="pagination">
582535
Fragmentation</h2>

0 commit comments

Comments
 (0)