@@ -513,136 +513,6 @@ Alignment and Spacing</h2>
513513 the [=grid container=] 's [=content box=] in the [=masonry axis=] ,
514514 then the [=masonry box=] would be larger than the [=grid container=] 's [=content box=] .
515515
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-
646516<h3 id="masonry-axis-baseline-alignment">
647517Baseline Alignment in the Masonry Axis</h3>
648518
0 commit comments