@@ -513,136 +513,6 @@ Alignment and Spacing</h2>
513
513
the [=grid container=] 's [=content box=] in the [=masonry axis=] ,
514
514
then the [=masonry box=] would be larger than the [=grid container=] 's [=content box=] .
515
515
516
- <h3 id="tracks-alignment">
517
- The ''align-tracks'' and ''justify-tracks'' Properties
518
- </h3>
519
-
520
- This specification adds two new properties to align
521
- the items in the [=masonry axis=]
522
- for each individual [=grid axis=] track:
523
-
524
- <pre class='propdef'>>
525
- Name : align-tracks
526
- Value : [normal | <<baseline-position>> | <<content-distribution>> | <<overflow-position>>? <<content-position>>]#
527
- Initial : normal
528
- Applies to : [=grid containers=] with [=masonry layout=] in their [=block axis=]
529
- Inherited : no
530
- Percentages : n/a
531
- Computed value : specified keyword(s)
532
- Animation type : discrete
533
- </pre>
534
-
535
- <pre class='propdef'>
536
- Name : justify-tracks
537
- Value : [normal | <<content-distribution>> | <<overflow-position>>? [ <<content-position>> | left | right ] ]#
538
- Initial : normal
539
- Applies to : [=grid containers=] with [=masonry layout=] in their [=inline axis=]
540
- Inherited : no
541
- Percentages : n/a
542
- Computed value : specified keyword(s)
543
- Animation type : discrete
544
- </pre>
545
-
546
- Note: These values are the same as for 'align-content' / 'justify-content' ,
547
- but here we accept multiple values in a comma-separated list.
548
-
549
- Unlike 'align-content' / 'justify-content' ,
550
- ''align-tracks/normal'' behaves as ''align-tracks/start'' for these properties.
551
- So the default rendering is the expected packed [=masonry layout=]
552
- as shown in the top left corner in the example below.
553
- When multiple values are specified,
554
- the first track in the [=grid axis=] uses the first value,
555
- the second track uses the second value, etc.
556
- If there are fewer values than tracks,
557
- then the last value is used for the remaining tracks.
558
- If there are more values than tracks,
559
- then the remaining values have no effect on the rendering.
560
-
561
- <div class="example">
562
- Here's a <a href="examples/align-tracks-example-1.html">testcase</a>
563
- that demonstrates a few 'align-tracks' alignment possibilities.
564
-
565
- <figure>
566
- <img src="images/align-tracks-example-1.png">
567
- <figcaption>
568
- The rendering of the ''align-tracks'' example above.
569
- </figcaption>
570
- </figure>
571
- </div>
572
-
573
- <h3 id="masonry-axis-stretch-alignment">
574
- Stretch Alignment in the Masonry Axis</h3>
575
-
576
- ''align-tracks/stretch'' will stretch the items in the [=masonry axis=]
577
- for each track separately,
578
- to fill the [=grid container=] 's [=content box=] .
579
- Any item can opt out from stretching by setting ''align-self'' / ''justify-self''
580
- to something other than ''align-self/normal'' or ''align-self/stretch''
581
- in the relevant axis.
582
- A stretched item with an [=indefinite size=] in the [=masonry axis=]
583
- will stretch its [=content-box=] size,
584
- but only up to its [=max size=] .
585
- An item with a [=definite size=] and an ''margin/auto'' margin in the [=masonry axis=]
586
- will stretch by increasing ''margin/auto'' margin(s).
587
- Otherwise, the item doesn't stretch.
588
-
589
- <div class="example">
590
- Here's a <a href="examples/align-tracks-example-2.html">testcase</a>
591
- that demonstrates stretching items in the [=masonry axis=] .
592
-
593
- <figure>
594
- <video src="images/align-tracks-example-2.webm" controls></video>
595
- <figcaption>
596
- Visualization of the ''align-tracks: stretch'' example above.
597
- </figcaption>
598
- </figure>
599
-
600
- Only the purple items have ''height/auto'' height,
601
- so they are the ones that may grow by default.
602
- A few items worth noting:
603
- item 4 has ''max-height: 40px'' so it only grows up to that size
604
- and then the other items in its track picks up the remaining size.
605
- Item 16 opts out from resizing by setting ''align-self: end'' .
606
- Item 18 has ''margin-block: auto''
607
- so it's centered in its allotted space instead of growing.
608
- Item 20 has ''margin-top: auto''
609
- so it's aligned to the end while its top-margin grows.
610
- </div>
611
-
612
- <div class="example">
613
- Here's the corresponding <a href="examples/justify-tracks-example-1.html">testcase</a>
614
- with a masonry [=inline axis=] instead.
615
- <figure>
616
- <video src="images/justify-tracks-example-1.webm" controls></video>
617
- <figcaption>
618
- Visualization of the ''justify-tracks: stretch'' example above.
619
- </figcaption>
620
- </figure>
621
- </div>
622
-
623
- <h3 id="masonry-axis-alignment">
624
- Individual Track Alignment in the Masonry Axis</h3>
625
-
626
- ''align-tracks'' / ''justify-tracks'' values can be specified per track.
627
-
628
- <div class="example">
629
- Here's an <a href="examples/masonry-axis-alignment-1.html">example</a> to illustrate this.
630
- Note that this example's 'align-tracks' value
631
- intentionally has one value less than the number of tracks
632
- to illustrate that the remaining track(s) use the last value
633
- (i.e. the right-most track also uses ''align-tracks/space-evenly'' ).
634
- (''align-tracks/baseline'' values are also supported
635
- but excluded in this test,
636
- see [[#masonry-axis-baseline-alignment]] for a description how that works with examples.)
637
-
638
- <figure>
639
- <img src="images/masonry-axis-alignment-1.png">
640
- <figcaption>
641
- Rendering of the ''align-tracks'' alignment example above.
642
- </figcaption>
643
- </figure>
644
- </div>
645
-
646
516
<h3 id="masonry-axis-baseline-alignment">
647
517
Baseline Alignment in the Masonry Axis</h3>
648
518
0 commit comments