@@ -521,62 +521,15 @@ Baseline Alignment in the Masonry Axis</h3>
521
521
and the [=grid container=] 's baseline is determined
522
522
the same as for a regular [=grid container=] in that axis.
523
523
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.
531
529
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?
576
531
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?
580
533
581
534
<h2 id="pagination">
582
535
Fragmentation</h2>
0 commit comments