Skip to content

Commit bbc6fc8

Browse files
authored
[css-grid-3] [Masonry] Remove Align-Tracks and Justify-Tracks (w3c#9529)
Issues w3c#8208 and w3c#8207
1 parent 3f13b5d commit bbc6fc8

5 files changed

+0
-130
lines changed

css-grid-3/Overview.bs

-130
Original file line numberDiff line numberDiff line change
@@ -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">
647517
Baseline Alignment in the Masonry Axis</h3>
648518

-12.9 KB
Binary file not shown.
-201 KB
Binary file not shown.
-166 KB
Binary file not shown.
-15.1 KB
Binary file not shown.

0 commit comments

Comments
 (0)