@@ -17,6 +17,7 @@ WPT Path Prefix: css/css-grid/masonry/tentative/
17
17
WPT Display : open
18
18
Markup Shorthands : css yes
19
19
Status Text : <strong>This specification represents two variations on the proposal for masonry layout. Feedback on the alternatives is welcome.</strong>
20
+ Ignored Terms : display, used value, computed value, repeat(), content box, containing block, margin boxes,
20
21
</pre>
21
22
22
23
<pre class=link-defaults>
@@ -352,7 +353,7 @@ Reordering and Accessibility</h3>
352
353
with item 3 slightly taller than the others.
353
354
Item 4 spans the first three columns, and is placed
354
355
just below item 3, while item 7 is tucked under item 5.">
355
- <figcaption> Auto-placed masonry layout with mixed-height items and mixed span sizes</figure >
356
+ <figcaption> Auto-placed masonry layout with mixed-height items and mixed span sizes</figcaption >
356
357
</figure>
357
358
Similarly, items explicitly placed into specific tracks can leave gaps behind them,
358
359
into which subsequent auto-placed items can be placed visually out-of-order.
@@ -390,7 +391,7 @@ Reordering and Accessibility</h3>
390
391
<span class="option grid">Grid-integrated Option:</span> Establishing Masonry Layout</h3>
391
392
392
393
<h4 id="grid-template-masonry">
393
- Indicating the stacking axis: the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h3 >
394
+ Indicating the stacking axis: the ''grid-template-columns/masonry'' keyword for 'grid-template-columns'/'grid-template-rows'</h4 >
394
395
395
396
<pre class='propdef partial'>
396
397
Name : grid-template-columns, grid-template-rows
@@ -399,7 +400,7 @@ Indicating the stacking axis: the ''grid-template-columns/masonry'' keyword for
399
400
Applies to : [=grid containers=]
400
401
Inherited : no
401
402
Percentages : refer to corresponding dimension of the content area
402
- Computed value : the keyword ''grid-template-columns/none'' or the keyword ''grid-template-columns/masonry'' or a [[ computed track list] ]
403
+ Computed value : the keyword ''grid-template-columns/none'' or the keyword ''grid-template-columns/masonry'' or a [= computed track list= ]
403
404
Animation type : see [[css-grid-2#track-sizing|CSS Grid Level 2]]
404
405
</pre>
405
406
@@ -574,7 +575,7 @@ and 'masonry-fill' at the same time.
574
575
575
576
576
577
<h2 id="masonry-track-templates">
577
- Masonry Track Specification</h3 >
578
+ Masonry Track Specification</h2 >
578
579
579
580
In the [=grid axis=] ,
580
581
the full power of [=grid layout=] is available for track specification:
@@ -855,7 +856,7 @@ Track Repetition: the ''repeat()'' notation</h3>
855
856
for the ''repeat()'' notation.
856
857
857
858
<h4 id="repeat-auto-areas">
858
- repeat(auto-areas)</h3 >
859
+ repeat(auto-areas)</h4 >
859
860
860
861
The new <dfn value for="repeat()">auto-areas</dfn> value for the ''repeat()'' notation
861
862
represents the number of repetitions necessary
@@ -882,7 +883,7 @@ repeat(auto-areas)</h3>
882
883
as needed to match the number of template areas.
883
884
884
885
<h4 id="repeat-auto-fit">
885
- repeat(auto-fit)</h3 >
886
+ repeat(auto-fit)</h4 >
886
887
887
888
In [=masonry containers=] (as in regular [=grid containers=] )
888
889
''repeat()/auto-fit'' acts like ''repeat()/auto-fill'' ,
@@ -1015,7 +1016,7 @@ Optimized Track Sizing</h4>
1015
1016
<a href="https://github.com/w3c/csswg-drafts/issues">report it to the CSSWG</a> .
1016
1017
1017
1018
<h2 id="masonry-track-placement">
1018
- Masonry Placement</h3 >
1019
+ Masonry Placement</h2 >
1019
1020
1020
1021
In the [=grid axis=] ,
1021
1022
items can be <em> explicitly placed</em> into tracks and span them using the familiar [=grid-placement properties=] ’ syntax.
@@ -1169,7 +1170,7 @@ Masonry Layout and Placement Algorithm</h3>
1169
1170
the algorithm is analogous but in reverse order.
1170
1171
1171
1172
<h4 id="containing-block">
1172
- Containing Block</h2 >
1173
+ Containing Block</h4 >
1173
1174
1174
1175
The [=containing block=] for a [=grid item=] participating in [=masonry layout=]
1175
1176
is formed by its [=grid area=] in the [=grid axis=]
@@ -1505,3 +1506,90 @@ Recent Changes</h3>
1505
1506
* Added ''masonry-slack: infinite'' .
1506
1507
(<a href="https://github.com/w3c/csswg-drafts/issues/10883">Issue 10883</a> )
1507
1508
* Minor corrections, updated acknowledgements, and added an example.
1509
+
1510
+ <wpt hidden>
1511
+ alignment/masonry-align-content-001.html
1512
+ alignment/masonry-align-content-002.html
1513
+ alignment/masonry-align-content-003.html
1514
+ alignment/masonry-align-content-004.html
1515
+ alignment/masonry-justify-content-001.html
1516
+ alignment/masonry-justify-content-002.html
1517
+ alignment/masonry-justify-content-003.html
1518
+ alignment/masonry-justify-content-004.html
1519
+ baseline/masonry-grid-item-content-baseline-001.html
1520
+ baseline/masonry-grid-item-self-baseline-001.html
1521
+ baseline/masonry-grid-item-self-baseline-002a.html
1522
+ baseline/masonry-grid-item-self-baseline-002b.html
1523
+ fragmentation/masonry-fragmentation-001.html
1524
+ fragmentation/masonry-fragmentation-002.html
1525
+ fragmentation/masonry-fragmentation-003.html
1526
+ gap/masonry-gap-001.html
1527
+ gap/masonry-gap-002.html
1528
+ grid-placement/masonry-grid-placement-named-lines-001.html
1529
+ grid-placement/masonry-grid-placement-named-lines-002.html
1530
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto.html
1531
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr.html
1532
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1.html
1533
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2.html
1534
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto.html
1535
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr.html
1536
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1.html
1537
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2.html
1538
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto.html
1539
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr.html
1540
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1.html
1541
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2.html
1542
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto.html
1543
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr.html
1544
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1.html
1545
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2.html
1546
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-005.html
1547
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-006.html
1548
+ intrinsic-sizing/masonry-intrinsic-sizing-cols-007.html
1549
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto.html
1550
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr.html
1551
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1.html
1552
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2.html
1553
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto.html
1554
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr.html
1555
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1.html
1556
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2.html
1557
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto.html
1558
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr.html
1559
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1.html
1560
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2.html
1561
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto.html
1562
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr.html
1563
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1.html
1564
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2.html
1565
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-005.html
1566
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-006.html
1567
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-007-ref.html
1568
+ intrinsic-sizing/masonry-intrinsic-sizing-rows-007.html
1569
+ item-placement/masonry-item-placement-001.html
1570
+ item-placement/masonry-item-placement-002.html
1571
+ item-placement/masonry-item-placement-003.html
1572
+ item-placement/masonry-item-placement-004.html
1573
+ item-placement/masonry-item-placement-005.html
1574
+ item-placement/masonry-item-placement-006.html
1575
+ item-placement/masonry-item-placement-007.html
1576
+ item-placement/masonry-item-placement-008.html
1577
+ item-placement/masonry-rows-item-placement-auto-flow-next-001.html
1578
+ item-placement/masonry-rows-with-grid-width-changed.html
1579
+ masonry-columns-item-containing-block-is-grid-content-width.html
1580
+ masonry-grid-template-columns-computed-withcontent.html
1581
+ masonry-not-inhibited-001.html
1582
+ order/masonry-order-001.html
1583
+ order/masonry-order-002.html
1584
+ parsing/masonry-parsing.html
1585
+ subgrid/masonry-subgrid-001.html
1586
+ subgrid/masonry-subgrid-002.html
1587
+ subgrid/track-sizing/masonry-subgrid-flex.html
1588
+ subgrid/track-sizing/masonry-subgrid-intrinsic-sizing.html
1589
+ subgrid/track-sizing/masonry-subgrid.html
1590
+ track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
1591
+ track-sizing/masonry-track-sizing-explicit-block.html
1592
+ track-sizing/masonry-track-sizing-overflow-left-side.html
1593
+ track-sizing/masonry-track-sizing-overflow-right-side.html
1594
+ track-sizing/masonry-track-sizing-span-row.html
1595
+ </wpt>
0 commit comments