mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1671268 part 2: Editorial nits to chapter 2 of the in-tree CSS Masonry spec. r=mats 

NPOTB DONTBUILD

Differential Revision: https://phabricator.services.mozilla.com/D93619
This commit is contained in:
Daniel Holbert 2020-10-15 00:27:21 +00:00
Родитель 207aff4d57
Коммит 01e69dcf13
2 изменённых файлов: 67 добавлений и 65 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

36
layout/docs/css-grid-3/Overview.bs
Просмотреть файл

@ -84,7 +84,7 @@ Masonry layout is supported for [=grid containers=] by specifying the value ''gr
Animation type: see <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns">CSS Grid</a>
</pre>
This allows us to use the full power of <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> in the [=grid axis=]. Line names and track sizes can be specified and <a>grid items</a> can be placed into the tracks and span them using 'grid-column' / 'grid-row' as usual. The <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> properties works the same as in a regular [=grid container=] in this axis. In the [=masonry axis=] however, items are laid out one after another using the [[#masonry-layout-algorithm]].
This allows us to use the full power of <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> in the [=grid axis=]. Line names and track sizes can be specified and <a>grid items</a> can be placed into the tracks and span them using 'grid-column' / 'grid-row' as usual. The <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> properties work the same as in a regular [=grid container=] in this axis. In the [=masonry axis=] however, items are laid out one after another using the [[#masonry-layout-algorithm]].
<div class="example">
Here's a masonry layout <a href="examples/pinterest-with-span.html">example</a> demonstrating placed and spanning items:
@ -95,13 +95,13 @@ Here's a masonry layout <a href="examples/pinterest-with-span.html">example</a>
</figure>
</div>
Subgrid <a>grid items</a> are supported but subgridding only occurs in the [=grid container's=] [=grid axis=], see [[#subgrids]] for details.
Subgrid <a>grid items</a> are supported, but subgridding only occurs in the [=grid container's=] [=grid axis=]; see [[#subgrids]] for details.
If ''grid-template-columns/masonry'' is specified in both axes then the inline-axis will behave as ''grid-template-columns/none'' and it will thus be the [=grid axis=].
If ''grid-template-columns/masonry'' is specified for both ''grid-template-columns'' and ''grid-template-rows'', then the used value for ''grid-template-columns'' is ''grid-template-columns/none'', and thus the inline axis will be the [=grid axis=].
<a>Grid items</a> are formed and [=blockified=] exactly the same as in a regular [=grid container=].
All CSS properties works the same as in a regular [=grid container=] unless otherwise specified by this specification. For example, ''order'' can be used to specify a different layout order for the items.
All CSS properties work the same as in a regular [=grid container=] unless otherwise specified by this specification. For example, ''order'' can be used to specify a different layout order for the items.
<h3 id="line-name-resolution">
Line Name Resolution</h3>
@ -114,46 +114,46 @@ Grid Item Placement</h3>
<a>Grid items</a> are placed using these steps:
<ol>
<li>Place the items as if the [=masonry axis=] had ''grid-template-columns/none'' specified in that axis.
<li>Items that were placed at the first (hypothetical) implicit line in the [=masonry axis=] after step 1 keep their placement in both axes as their final placement. They will be laid out first in each [=grid axis=] track and their [=grid axis=] placement is considered definite henceforth. All other items ignore their placement from step 1. Any item with with a specified definite placement in the [=masonry axis=] that doesn't result in it being placed at the first implicit line in the [=masonry axis=] will be treated as having 'auto'-placement in that axis.
<li>For any items that were placed at the first (hypothetical) implicit line in the [=masonry axis=] in step 1, those items keep their placement in both axes as their final placement. They will be laid out first in each [=grid axis=] track and their [=grid axis=] placement is considered definite henceforth. All other items ignore their placement from step 1. Any item with with a specified definite placement in the [=masonry axis=] that doesn't result in it being placed at the first implicit line in the [=masonry axis=] will be treated as having 'auto'-placement in that axis.
<li>Place items using the <a href="#masonry-layout-algorithm">Masonry layout algorithm</a> below.
</ol>
(The reason for step 1 above is to determine which items contribute to intrinsic track sizing in the [=grid axis=], see [[#track-sizing]] below.)
(The reason for step 1 above is to determine which items contribute to intrinsic track sizing in the [=grid axis=]; see [[#track-sizing]] below.)
<h3 id="track-sizing">
Grid Axis Track Sizing</h3>
Track sizing works the same as in <a href="https://drafts.csswg.org/css-grid-2/#algo-track-sizing">CSS Grid</a>, except that that the algorithm is run only with the subset of items that has a known grid axis placement. This subset is the items placed at the first implicit line in the [=masonry axis=] in <a href="#grid-item-placement">Grid Item Placement</a> above, plus the items that have a specified definite placement in the grid axis, plus the items that span all grid axis tracks (which obviously will be placed at the first implicit line since there is no other way to place them). Other items will be placed in the grid axis by the [[#masonry-layout-algorithm]] below and don't contribute to intrinsic track sizing (because that would create circular dependencies).
Track sizing works the same as in <a href="https://drafts.csswg.org/css-grid-2/#algo-track-sizing">CSS Grid</a>, except that that the algorithm is run only with the subset of items that have a known [=grid axis=] placement. This subset contains the items placed at the first implicit line in the [=masonry axis=] in <a href="#grid-item-placement">Grid Item Placement</a> above, plus the items that have a specified definite placement in the [=grid axis=], plus the items that span all [=grid axis=] tracks (which obviously will be placed at the first implicit line since there is no other way to place them). Other items will be placed in the [=grid axis=] by the [[#masonry-layout-algorithm]] below and don't contribute to intrinsic track sizing (because that would create circular dependencies).
<h4 id="repeat-auto-fit">
repeat(auto-fit)</h3>
''grid-template-rows/repeat(auto-fit)'' behaves as ''grid-template-rows/repeat(auto-fill)'' when the other axis is a [=masonry axis=]. The reason for this is that ''grid-row/auto''-placed items depend on the layout size of its siblings. Removing empty tracks after layout wouldn't be possible in most cases since it might affect any intrinsic track sizes. Even if all track sizes are definite the containing block size could change for grid-aligned abs.pos. descendants. This makes ''grid-template-rows/repeat(auto-fit)'' impossible to support in a grid container with masonry layout.
''grid-template-rows/repeat(auto-fit)'' behaves as ''grid-template-rows/repeat(auto-fill)'' when the other axis is a [=masonry axis=]. The reason for this is that ''grid-row/auto''-placed items depend on the layout size of their siblings. Removing empty tracks after layout wouldn't be possible in most cases since it might affect any intrinsic track sizes. Even if all track sizes are definite, the containing block size could change for grid-aligned absolutely-positioned descendants. This makes ''grid-template-rows/repeat(auto-fit)'' impossible to support in a grid container with masonry layout.
<h3 id="masonry-layout-algorithm">
Masonry Layout Algorithm</h3>
Items are placed in <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> but items with a definite placement are placed before items with an indefinite position (as in regular grid layout). For each of the tracks in the [=grid axis=], keep a <dfn>running position</dfn> initialized to zero. For each item placed at the first implicit line in the [=masonry axis=] in <a href="#grid-item-placement">Grid Item Placement</a> step 1 above:
Items are placed in <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a>, but items with a definite placement are placed before items with an indefinite position (as in regular grid layout). For each of the tracks in the [=grid axis=], keep a <dfn>running position</dfn> initialized to zero. For each item placed at the first implicit line in the [=masonry axis=] in <a href="#grid-item-placement">Grid Item Placement</a> step 1 above:
<ol>
<li>position the item at the content edge of the grid container in the [=masonry axis=] and at its start track in the [=grid axis=]</li>
<li>calculate the size of the <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the [=masonry axis=]. Set the [=running position=] of the [=grid axis=] tracks the item spans to the maximum of <code>margin-box-end + grid-gap</code> and the current [=running position=] of those tracks.
<li>Position the item at the content edge of the grid container in the [=masonry axis=] and at its start track in the [=grid axis=].</li>
<li>Calculate the size of the <a href="#containing-block">containing block</a> and then layout the item. Then, calculate its resulting margin-box in the [=masonry axis=]. Set the [=running position=] of the [=grid axis=] tracks the item spans to the maximum of <code>margin-box-end + grid-gap</code> and the current [=running position=] of those tracks.</li>
</ol>
Note: This means that items with a definite placement at line 1 in the [=masonry axis=] by <a href="#grid-item-placement">Grid Item Placement</a> step 1 can be made to intentionally overlap.
The remaining items get their final placement using the following steps:
<ol>
<li>If the item has an indefinite placement in the [=grid axis=] then resolve its definite placement in the [=grid axis=] using these substeps:
<li>If the item has an indefinite placement in the [=grid axis=], then resolve its definite placement in the [=grid axis=] using these substeps:
<ol>
<li>starting at the first [=grid axis=] line in the implicit grid...</li>
<li>find the largest [=running position=] of the [=grid axis=] tracks that the item would span if it were placed at this line, call this position <code>max_pos</code></li>
<li>increment the line number and repeat step 2 until the item would no longer fit inside the grid</li>
<li>pick the line that resulted in the smallest <code>max_pos</code> as the item's definite placement in the [=grid axis=]</li>
<li>Starting at the first [=grid axis=] line in the implicit grid...</li>
<li>Find the largest [=running position=] of the [=grid axis=] tracks that the item would span if it were placed at this line, and call this position <code>max_pos</code>.</li>
<li>Increment the line number and repeat step 2 until the item would no longer fit inside the grid.</li>
<li>Pick the line that resulted in the smallest <code>max_pos</code> as the item's definite placement in the [=grid axis=].</li>
</ol>
Otherwise, a definite placement in the [=grid axis=] is honored the same as in a regular grid.
</li>
<li>position the item at its [=grid axis=] start track and the maximum of the [=running position=]s of the tracks it spans
<li>calculate the size of the item's <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the [=masonry axis=]. Set the [=running position=] of the [=grid axis=] tracks the item spans to <code>max_pos + margin-box-end + grid-gap</code>.
<li>Position the item at its [=grid axis=] start track and the maximum of the [=running position=]s of the tracks it spans.
<li>Calculate the size of the item's <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the [=masonry axis=]. Set the [=running position=] of the [=grid axis=] tracks the item spans to <code>max_pos + margin-box-end + grid-gap</code>.
</ol>
<h3 id="masonry-auto-flow">

96
layout/docs/css-grid-3/Overview.html
Просмотреть файл

@ -1323,7 +1323,7 @@ Possible extra rowspan handling
</style>
<meta content="Bikeshed version 89ebb6ab, updated Fri Oct 9 15:32:07 2020 -0700" name="generator">
<link href="https://drafts.csswg.org/css-grid-3/" rel="canonical">
<meta content="613461af16dd1bfa0ba74d13d9a36a30bdf470d1" name="document-revision">
<meta content="b983fca7a082a53d51523d662a7ea1ee6f09f7ce" name="document-revision">
<style>/* style-autolinks */
.css.css, .property.property, .descriptor.descriptor {
@ -2020,7 +2020,7 @@ Parts of this work may be from another specification document. If so, those par
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
<td>see <a href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template-columns" id="termref-for-">CSS Grid</a>
</table>
<p>This allows us to use the full power of <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis">grid axis</a>. Line names and track sizes can be specified and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item">grid items</a> can be placed into the tracks and span them using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row" id="ref-for-propdef-grid-row">grid-row</a> as usual. The <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> properties works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid container</a> in this axis. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis">masonry axis</a> however, items are laid out one after another using the <a href="#masonry-layout-algorithm">§ 2.4 Masonry Layout Algorithm</a>.</p>
<p>This allows us to use the full power of <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis">grid axis</a>. Line names and track sizes can be specified and <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item">grid items</a> can be placed into the tracks and span them using <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-column" id="ref-for-propdef-grid-column">grid-column</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-row" id="ref-for-propdef-grid-row">grid-row</a> as usual. The <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> properties work the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②">grid container</a> in this axis. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis">masonry axis</a> however, items are laid out one after another using the <a href="#masonry-layout-algorithm">§ 2.4 Masonry Layout Algorithm</a>.</p>
<div class="example" id="example-1f001e34">
<a class="self-link" href="#example-1f001e34"></a> Here’s a masonry layout <a href="examples/pinterest-with-span.html">example</a> demonstrating placed and spanning items:
<figure>
@ -2028,44 +2028,44 @@ Parts of this work may be from another specification document. If so, those par
<figcaption>Rendering of the example above.</figcaption>
</figure>
</div>
<p>Subgrid <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item①">grid items</a> are supported but subgridding only occurs in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid container’s</a> <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①">grid axis</a>, see <a href="#subgrids">§ 8 Subgrids</a> for details.</p>
<p>If <span class="css">masonry</span> is specified in both axes then the inline-axis will behave as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none①">none</a> and it will thus be the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②">grid axis</a>.</p>
<p>Subgrid <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item①">grid items</a> are supported, but subgridding only occurs in the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container③">grid container’s</a> <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①">grid axis</a>; see <a href="#subgrids">§ 8 Subgrids</a> for details.</p>
<p>If <span class="css">masonry</span> is specified for both <span class="css">grid-template-columns</span> and <span class="css">grid-template-rows</span>, then the used value for <span class="css">grid-template-columns</span> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none①">none</a>, and thus the inline axis will be the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②">grid axis</a>.</p>
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item②">Grid items</a> are formed and <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#blockify" id="ref-for-blockify">blockified</a> exactly the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container④">grid container</a>.</p>
<p>All CSS properties works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid container</a> unless otherwise specified by this specification. For example, <span class="css">order</span> can be used to specify a different layout order for the items.</p>
<p>All CSS properties work the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑤">grid container</a> unless otherwise specified by this specification. For example, <span class="css">order</span> can be used to specify a different layout order for the items.</p>
<h3 class="heading settled" data-level="2.1" id="line-name-resolution"><span class="secno">2.1. </span><span class="content"> Line Name Resolution</span><a class="self-link" href="#line-name-resolution"></a></h3>
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item③">Grid item</a> line name resolution works the same as if <span class="css">masonry</span> were replaced with <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none②">none</a>, i.e. line names are resolved <em>in both axes</em>. The <a href="https://drafts.csswg.org/css-grid-2/#line-placement">line name resolution</a> works exactly is in <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a>.</p>
<h3 class="heading settled" data-level="2.2" id="grid-item-placement"><span class="secno">2.2. </span><span class="content"> Grid Item Placement</span><a class="self-link" href="#grid-item-placement"></a></h3>
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item④">Grid items</a> are placed using these steps:</p>
<ol>
<li>Place the items as if the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①">masonry axis</a> had <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-template-rows-none" id="ref-for-valdef-grid-template-rows-none③">none</a> specified in that axis.
<li>Items that were placed at the first (hypothetical) implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②">masonry axis</a> after step 1 keep their placement in both axes as their final placement. They will be laid out first in each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③">grid axis</a> track and their <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis④">grid axis</a> placement is considered definite henceforth. All other items ignore their placement from step 1. Any item with with a specified definite placement in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③">masonry axis</a> that doesn’t result in it being placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis④">masonry axis</a> will be treated as having <a class="property" data-link-type="propdesc">auto</a>-placement in that axis.
<li>For any items that were placed at the first (hypothetical) implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②">masonry axis</a> in step 1, those items keep their placement in both axes as their final placement. They will be laid out first in each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③">grid axis</a> track and their <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis④">grid axis</a> placement is considered definite henceforth. All other items ignore their placement from step 1. Any item with with a specified definite placement in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③">masonry axis</a> that doesn’t result in it being placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis④">masonry axis</a> will be treated as having <a class="property" data-link-type="propdesc">auto</a>-placement in that axis.
<li>Place items using the <a href="#masonry-layout-algorithm">Masonry layout algorithm</a> below.
</ol>
<p>(The reason for step 1 above is to determine which items contribute to intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑤">grid axis</a>, see <a href="#track-sizing">§ 2.3 Grid Axis Track Sizing</a> below.)</p>
<p>(The reason for step 1 above is to determine which items contribute to intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑤">grid axis</a>; see <a href="#track-sizing">§ 2.3 Grid Axis Track Sizing</a> below.)</p>
<h3 class="heading settled" data-level="2.3" id="track-sizing"><span class="secno">2.3. </span><span class="content"> Grid Axis Track Sizing</span><a class="self-link" href="#track-sizing"></a></h3>
<p>Track sizing works the same as in <a href="https://drafts.csswg.org/css-grid-2/#algo-track-sizing">CSS Grid</a>, except that that the algorithm is run only with the subset of items that has a known grid axis placement. This subset is the items placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑤">masonry axis</a> in <a href="#grid-item-placement">Grid Item Placement</a> above, plus the items that have a specified definite placement in the grid axis, plus the items that span all grid axis tracks (which obviously will be placed at the first implicit line since there is no other way to place them). Other items will be placed in the grid axis by the <a href="#masonry-layout-algorithm">§ 2.4 Masonry Layout Algorithm</a> below and don’t contribute to intrinsic track sizing (because that would create circular dependencies).</p>
<p>Track sizing works the same as in <a href="https://drafts.csswg.org/css-grid-2/#algo-track-sizing">CSS Grid</a>, except that that the algorithm is run only with the subset of items that have a known <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑥">grid axis</a> placement. This subset contains the items placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑤">masonry axis</a> in <a href="#grid-item-placement">Grid Item Placement</a> above, plus the items that have a specified definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑦">grid axis</a>, plus the items that span all <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑧">grid axis</a> tracks (which obviously will be placed at the first implicit line since there is no other way to place them). Other items will be placed in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑨">grid axis</a> by the <a href="#masonry-layout-algorithm">§ 2.4 Masonry Layout Algorithm</a> below and don’t contribute to intrinsic track sizing (because that would create circular dependencies).</p>
<h4 class="heading settled" data-level="2.3.1" id="repeat-auto-fit"><span class="secno">2.3.1. </span><span class="content"> repeat(auto-fit)</span><a class="self-link" href="#repeat-auto-fit"></a></h4>
<p><span class="css">repeat(auto-fit)</span> behaves as <span class="css">repeat(auto-fill)</span> when the other axis is a <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑥">masonry axis</a>. The reason for this is that <span class="css">auto</span>-placed items depend on the layout size of its siblings. Removing empty tracks after layout wouldn’t be possible in most cases since it might affect any intrinsic track sizes. Even if all track sizes are definite the containing block size could change for grid-aligned abs.pos. descendants. This makes <span class="css">repeat(auto-fit)</span> impossible to support in a grid container with masonry layout.</p>
<p><span class="css">repeat(auto-fit)</span> behaves as <span class="css">repeat(auto-fill)</span> when the other axis is a <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑥">masonry axis</a>. The reason for this is that <span class="css">auto</span>-placed items depend on the layout size of their siblings. Removing empty tracks after layout wouldn’t be possible in most cases since it might affect any intrinsic track sizes. Even if all track sizes are definite, the containing block size could change for grid-aligned absolutely-positioned descendants. This makes <span class="css">repeat(auto-fit)</span> impossible to support in a grid container with masonry layout.</p>
<h3 class="heading settled" data-level="2.4" id="masonry-layout-algorithm"><span class="secno">2.4. </span><span class="content"> Masonry Layout Algorithm</span><a class="self-link" href="#masonry-layout-algorithm"></a></h3>
<p>Items are placed in <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> but items with a definite placement are placed before items with an indefinite position (as in regular grid layout). For each of the tracks in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑥">grid axis</a>, keep a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="running-position">running position</dfn> initialized to zero. For each item placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑦">masonry axis</a> in <a href="#grid-item-placement">Grid Item Placement</a> step 1 above:</p>
<p>Items are placed in <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a>, but items with a definite placement are placed before items with an indefinite position (as in regular grid layout). For each of the tracks in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⓪">grid axis</a>, keep a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="running-position">running position</dfn> initialized to zero. For each item placed at the first implicit line in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑦">masonry axis</a> in <a href="#grid-item-placement">Grid Item Placement</a> step 1 above:</p>
<ol>
<li>position the item at the content edge of the grid container in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑧">masonry axis</a> and at its start track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑦">grid axis</a>
<li>calculate the size of the <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑨">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑧">grid axis</a> tracks the item spans to the maximum of <code>margin-box-end + grid-gap</code> and the current <a data-link-type="dfn" href="#running-position" id="ref-for-running-position①">running position</a> of those tracks.
<li>Position the item at the content edge of the grid container in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑧">masonry axis</a> and at its start track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①①">grid axis</a>.
<li>Calculate the size of the <a href="#containing-block">containing block</a> and then layout the item. Then, calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis⑨">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①②">grid axis</a> tracks the item spans to the maximum of <code>margin-box-end + grid-gap</code> and the current <a data-link-type="dfn" href="#running-position" id="ref-for-running-position①">running position</a> of those tracks.
</ol>
<p class="note" role="note"><span>Note:</span> This means that items with a definite placement at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⓪">masonry axis</a> by <a href="#grid-item-placement">Grid Item Placement</a> step 1 can be made to intentionally overlap.</p>
<p>The remaining items get their final placement using the following steps:</p>
<ol>
<li>
If the item has an indefinite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis⑨">grid axis</a> then resolve its definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⓪">grid axis</a> using these substeps:
If the item has an indefinite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①③">grid axis</a>, then resolve its definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①④">grid axis</a> using these substeps:
<ol>
<li>starting at the first <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①①">grid axis</a> line in the implicit grid...
<li>find the largest <a data-link-type="dfn" href="#running-position" id="ref-for-running-position②">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①②">grid axis</a> tracks that the item would span if it were placed at this line, call this position <code>max_pos</code>
<li>increment the line number and repeat step 2 until the item would no longer fit inside the grid
<li>pick the line that resulted in the smallest <code>max_pos</code> as the item’s definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①③">grid axis</a>
<li>Starting at the first <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑤">grid axis</a> line in the implicit grid...
<li>Find the largest <a data-link-type="dfn" href="#running-position" id="ref-for-running-position②">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑥">grid axis</a> tracks that the item would span if it were placed at this line, and call this position <code>max_pos</code>.
<li>Increment the line number and repeat step 2 until the item would no longer fit inside the grid.
<li>Pick the line that resulted in the smallest <code>max_pos</code> as the item’s definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑦">grid axis</a>.
</ol>
Otherwise, a definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①④">grid axis</a> is honored the same as in a regular grid.
<li>position the item at its <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑤">grid axis</a> start track and the maximum of the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position③">running position</a>s of the tracks it spans
<li>calculate the size of the item’s <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①①">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position④">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑥">grid axis</a> tracks the item spans to <code>max_pos + margin-box-end + grid-gap</code>.
Otherwise, a definite placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑧">grid axis</a> is honored the same as in a regular grid.
<li>Position the item at its <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑨">grid axis</a> start track and the maximum of the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position③">running position</a>s of the tracks it spans.
<li>Calculate the size of the item’s <a href="#containing-block">containing block</a> and then layout the item. Then calculate its resulting margin-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①①">masonry axis</a>. Set the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position④">running position</a> of the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⓪">grid axis</a> tracks the item spans to <code>max_pos + margin-box-end + grid-gap</code>.
</ol>
<h3 class="heading settled" data-level="2.5" id="masonry-auto-flow"><span class="secno">2.5. </span><span class="content"> The <span class="css">masonry-auto-flow</span> Property</span><a class="self-link" href="#masonry-auto-flow"></a></h3>
<p>The <a href="#masonry-layout-algorithm">§ 2.4 Masonry Layout Algorithm</a> above can be modified in two ways, using the new <a class="property" data-link-type="propdesc" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow">masonry-auto-flow</a> property:</p>
@ -2099,7 +2099,7 @@ Parts of this work may be from another specification document. If so, those par
<th><a href="https://www.w3.org/TR/web-animations/#animation-type">Animation type:</a>
<td>discrete
</table>
<p>First, picking definite items first for placement can be inhibited by specifying the <span class="css">ordered</span> keyword so that a plain <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> is used instead. Second, instead of placing the items in the track(s) with the most remaining space as described above we can place them one after another in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑦">grid axis</a> by specifying the <span class="css">next</span> keyword, for <a href="examples/masonry-auto-flow-next.html">example</a>:</p>
<p>First, picking definite items first for placement can be inhibited by specifying the <span class="css">ordered</span> keyword so that a plain <a href="https://drafts.csswg.org/css-flexbox-1/#order-modified-document-order">order-modifed document order</a> is used instead. Second, instead of placing the items in the track(s) with the most remaining space as described above we can place them one after another in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②①">grid axis</a> by specifying the <span class="css">next</span> keyword, for <a href="examples/masonry-auto-flow-next.html">example</a>:</p>
<div class="example" id="example-be4288db">
<a class="self-link" href="#example-be4288db"></a>
<pre class="language-css highlight">&lt;style>
@ -2131,11 +2131,11 @@ item<c- nf>:nth-child</c-><c- p>(</c-><c- m>2</c-><c- k>n</c-><c- m>+1</c-><c- p
<p>(Without <a class="css" data-link-type="propdesc" href="#propdef-masonry-auto-flow" id="ref-for-propdef-masonry-auto-flow②">masonry-auto-flow: next</a>, item 4 would be placed below item 2.)</p>
</div>
<h2 class="heading settled" data-level="3" id="containing-block"><span class="secno">3. </span><span class="content"> Containing Block</span><a class="self-link" href="#containing-block"></a></h2>
<p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑤">grid item</a> is formed by its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area">grid area</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑧">grid axis</a> and the grid container’s content-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①②">masonry axis</a>.</p>
<p>The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block">containing block</a> for a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑤">grid item</a> is formed by its <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-area" id="ref-for-grid-area">grid area</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②②">grid axis</a> and the grid container’s content-box in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①②">masonry axis</a>.</p>
<h2 class="heading settled" data-level="4" id="#implicit-grid"><span class="secno">4. </span><span class="content"> The Implicit Grid </span><a class="self-link" href="#%23implicit-grid"></a></h2>
The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#implicit-grid" id="ref-for-implicit-grid">implicit grid</a> is formed in the same way as for a regular grid container. However, it’s only used in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis①⑨">grid axis</a>. The flow axis specified by <span class="css">grid-auto-flow</span> is ignored — items are always placed by filling the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⓪">grid axis</a> (note that the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-auto-flow-dense" id="ref-for-valdef-grid-auto-flow-dense">dense</a> keyword does have an effect though in determining which items end up at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①③">masonry axis</a>, in <a href="#grid-item-placement">§ 2.2 Grid Item Placement</a> step 1). <span class="css">direction:rtl</span> reverses the grid if the inline-axis is the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②①">grid axis</a> (as usual for a regular grid container) and it makes items flow from right to left if the inline-axis is the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①④">masonry axis</a>.
The <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#implicit-grid" id="ref-for-implicit-grid">implicit grid</a> is formed in the same way as for a regular grid container. However, it’s only used in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②③">grid axis</a>. The flow axis specified by <span class="css">grid-auto-flow</span> is ignored — items are always placed by filling the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②④">grid axis</a> (note that the <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-grid-2/#valdef-grid-auto-flow-dense" id="ref-for-valdef-grid-auto-flow-dense">dense</a> keyword does have an effect though in determining which items end up at line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①③">masonry axis</a>, in <a href="#grid-item-placement">§ 2.2 Grid Item Placement</a> step 1). <span class="css">direction:rtl</span> reverses the grid if the inline-axis is the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑤">grid axis</a> (as usual for a regular grid container) and it makes items flow from right to left if the inline-axis is the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①④">masonry axis</a>.
<div class="example" id="example-de83ba08">
<a class="self-link" href="#example-de83ba08"></a> Here’s a simple <a href="examples/rtl-grid-axis.html">example</a> using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction: rtl</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②②">grid axis</a>:
<a class="self-link" href="#example-de83ba08"></a> Here’s a simple <a href="examples/rtl-grid-axis.html">example</a> using <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction" id="ref-for-propdef-direction">direction: rtl</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑥">grid axis</a>:
<pre class="language-css highlight">&lt;style>
.grid <c- p>{</c->
<c- k>display</c-><c- p>:</c-> inline-grid<c- p>;</c->
@ -2224,7 +2224,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
</div>
<h2 class="heading settled" data-level="6" id="alignment"><span class="secno">6. </span><span class="content"> Alignment and Spacing</span><a class="self-link" href="#alignment"></a></h2>
<p><a href="https://www.w3.org/TR/css-grid-2/#gutters">Gutters</a> are supported in both axes. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑧">masonry axis</a> the gap is applied between each pair of adjacent items margin-box. Margins do not collapse in either axis.</p>
<p><a href="https://drafts.csswg.org/css-grid-2/#alignment">Alignment</a> works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid container</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②③">grid axis</a>.</p>
<p><a href="https://drafts.csswg.org/css-grid-2/#alignment">Alignment</a> works the same as in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container⑨">grid container</a> in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑦">grid axis</a>.</p>
<p><a href="https://drafts.csswg.org/css-align/#content-distribution">Content Distribution</a> in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis①⑨">masonry axis</a> is applied to the content as a whole, same as for block containers. More specifically, the <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-subject" id="ref-for-alignment-subject">alignment subject</a> is the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="masonry-box">masonry box</dfn>, which is the area formed by the content-box edge of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⓪">grid container</a> to the margin-box end edge of the item that is the furthest away in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⓪">masonry axis</a>, as indicated by the dashed border here:</p>
<figure>
<img src="images/masonry-box.png">
@ -2233,7 +2233,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
</figure>
<p>Note that there is only ever one <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#alignment-subject" id="ref-for-alignment-subject①">alignment subject</a> for these properties in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②①">masonry axis</a>, so the unique <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content">justify-content</a> values boil down to <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start" id="ref-for-valdef-self-position-start">start</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center">center</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end">end</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch">stretch</a> and <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment">baseline alignment</a>. (<a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-justify-content-normal" id="ref-for-valdef-justify-content-normal">normal</a> behaves as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-content-stretch" id="ref-for-valdef-align-content-stretch①">stretch</a> as usual for <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①①">grid containers</a>). In the figure above the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①②">grid container</a> has <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content①">align-content: start</a>. By default, the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box①">masonry box</a> is the same as the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①③">grid container</a>'s content-box due to being stretched.</p>
<h3 class="heading settled" data-level="6.1" id="tracks-alignment"><span class="secno">6.1. </span><span class="content"> The align-tracks and justify-tracks Properties </span><a class="self-link" href="#tracks-alignment"></a></h3>
<p>This specification adds two new properties to align the items in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②②">masonry axis</a> for each individual <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②④">grid axis</a> track:</p>
<p>This specification adds two new properties to align the items in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②②">masonry axis</a> for each individual <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑧">grid axis</a> track:</p>
<table class="def propdef" data-link-for-hint="align-tracks">
<tbody>
<tr>
@ -2295,7 +2295,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
<td>discrete
</table>
<p class="note" role="note"><span>Note:</span> These values are the same as for <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content②">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content①">justify-content</a>, but here we accept multiple values in a comma-separated list.</p>
<p>Unlike <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content②">justify-content</a>, <span class="css">normal</span> behaves as <span class="css">start</span> for these properties. So the default rendering is the expected packed masonry layout as shown in the top left corner in the example below. When multiple values are specified the first track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑤">grid axis</a> uses the first value, the second track uses the second value, etc. If there are fewer values than tracks then the last value is used for the remaining tracks. If there are more values than tracks then the remaining values have no effect on the rendering.</p>
<p>Unlike <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-align-content" id="ref-for-propdef-align-content③">align-content</a> / <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-align-3/#propdef-justify-content" id="ref-for-propdef-justify-content②">justify-content</a>, <span class="css">normal</span> behaves as <span class="css">start</span> for these properties. So the default rendering is the expected packed masonry layout as shown in the top left corner in the example below. When multiple values are specified the first track in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑨">grid axis</a> uses the first value, the second track uses the second value, etc. If there are fewer values than tracks then the last value is used for the remaining tracks. If there are more values than tracks then the remaining values have no effect on the rendering.</p>
<div class="example" id="example-9dcbe46d">
<a class="self-link" href="#example-9dcbe46d"></a> Here’s a <a href="examples/align-tracks-example-1.html">testcase</a> that demonstrates a few <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks">align-tracks</a> alignment possibilities.
<figure>
@ -2330,7 +2330,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
</figure>
</div>
<h3 class="heading settled" data-level="6.4" id="masonry-axis-baseline-alignment"><span class="secno">6.4. </span><span class="content"> Baseline Alignment in the Masonry Axis</span><a class="self-link" href="#masonry-axis-baseline-alignment"></a></h3>
<p>Item <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment①">baseline alignment</a> inside the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑥">grid axis</a> tracks works as usual for a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑥">grid container</a>, and the grid container’s baseline is determined the same as for a regular grid container in that axis.</p>
<p>Item <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment①">baseline alignment</a> inside the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⓪">grid axis</a> tracks works as usual for a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑥">grid container</a>, and the grid container’s baseline is determined the same as for a regular grid container in that axis.</p>
<p><a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-alignment" id="ref-for-baseline-alignment②">Baseline alignment</a> is supported also in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑥">masonry axis</a>, on the first and last item in each track (but not on items "in the middle" of the track). Only tracks with the <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks③">align-tracks</a> / <a class="property" data-link-type="propdesc" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks①">justify-tracks</a> values <span class="css">start</span>, <span class="css">end</span> or <span class="css">stretch</span>, support baseline alignment. There are four different sets of <a data-link-type="dfn" href="https://drafts.csswg.org/css-align-3/#baseline-sharing-group" id="ref-for-baseline-sharing-group">baseline-sharing groups</a>:</p>
<ol>
<li>the first item in each <span class="css">start</span> track + the first item in each <span class="css">stretch</span> track
@ -2353,7 +2353,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
<p class="issue" id="issue-2abb2fa3"><a class="self-link" href="#issue-2abb2fa3"></a> maybe we can make stretch alignment (at least) smarter so that we avoid overlapping spanning items in a few more cases that would be useful to authors?</p>
<h2 class="heading settled" data-level="7" id="pagination"><span class="secno">7. </span><span class="content"> Fragmentation</span><a class="self-link" href="#pagination"></a></h2>
<h3 class="heading settled" data-level="7.1" id="masonry-axis-pagination"><span class="secno">7.1. </span><span class="content"> Fragmentation in the Masonry Axis</span><a class="self-link" href="#masonry-axis-pagination"></a></h3>
<p>Each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑦">grid axis</a> track is fragmented independently in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑨">masonry axis</a>. If a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑥">grid item</a> is fragmented, or has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break">forced break</a> before/after it, then the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑤">running position</a> for the tracks that it spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑧">grid axis</a> are set to the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentainer" id="ref-for-fragmentainer">fragmentainer</a> so that no further items will be placed in those tracks. An item that is split into multiple fragments retains its placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis②⑨">grid axis</a> for all its fragments. A grid item that is pushed however, is placed again by the next grid container fragment. Placement continues until all items are placed or pushed to a new fragment.</p>
<p>Each <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③①">grid axis</a> track is fragmented independently in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis②⑨">masonry axis</a>. If a <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-item" id="ref-for-grid-item⑥">grid item</a> is fragmented, or has a <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#forced-break" id="ref-for-forced-break">forced break</a> before/after it, then the <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑤">running position</a> for the tracks that it spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③②">grid axis</a> are set to the size of the <a data-link-type="dfn" href="https://drafts.csswg.org/css-break-4/#fragmentainer" id="ref-for-fragmentainer">fragmentainer</a> so that no further items will be placed in those tracks. An item that is split into multiple fragments retains its placement in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③③">grid axis</a> for all its fragments. A grid item that is pushed however, is placed again by the next grid container fragment. Placement continues until all items are placed or pushed to a new fragment.</p>
<div class="example" id="example-b489c79e">
<a class="self-link" href="#example-b489c79e"></a> Here’s an <a href="examples/fragmentation-block-axis-example.html">example</a> illustrating fragmentation of a grid with masonry layout in its block-axis. It renders like this:
<figure style="max-width:100%">
@ -2362,7 +2362,7 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
</figure>
</div>
<h3 class="heading settled" data-level="7.2" id="grid-axis-pagination"><span class="secno">7.2. </span><span class="content"> Fragmentation in the Grid Axis</span><a class="self-link" href="#grid-axis-pagination"></a></h3>
<p>Fragmentation in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⓪">grid axis</a> with masonry layout in the other axis is also supported. In this case the fragmentation behaves more like in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑧">grid container</a>, however which <a data-link-type="dfn">grid-axis</a> track each item is placed into occurs as a separate step upfront before fragmentation occurs.</p>
<p>Fragmentation in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③④">grid axis</a> with masonry layout in the other axis is also supported. In this case the fragmentation behaves more like in a regular <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container①⑧">grid container</a>, however which <a data-link-type="dfn">grid-axis</a> track each item is placed into occurs as a separate step upfront before fragmentation occurs.</p>
<div class="example" id="example-740b4428">
<a class="self-link" href="#example-740b4428"></a> Here’s an <a href="examples/fragmentation-inline-axis-example.html">example</a> illustrating fragmentation of a grid with masonry layout in its inline-axis. In this case the breaks occurs between the <a data-link-type="dfn">grid-axis</a> rows. It renders like this:
<figure style="max-width:100%">
@ -2422,11 +2422,11 @@ item <c- p>{</c-> <c- k>background</c-><c- p>:</c-> silver<c- p>;</c-> <c- k>mar
<p>Note how the subgrid’s first item ("subgrid.1") contributes to the intrinsic size of the 2nd row in the parent grid. This is possible since the subgrid specified a definite placement so we know which tracks it will occupy. Note also that trying to subgrid the parent’s <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③②">masonry axis</a> results in the subgrid getting masonry layout in its inline-axis.</p>
</div>
<h2 class="heading settled" data-level="9" id="abspos"><span class="secno">9. </span><span class="content"> Absolute Positioning</span><a class="self-link" href="#abspos"></a></h2>
<p><a href="https://drafts.csswg.org/css-grid/#abspos-items">Grid-aligned absolute-positioned descendants</a> are supported. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③③">masonry axis</a> all <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-position" id="ref-for-grid-position">grid positions</a> except line 1 are treated as <a class="property" data-link-type="propdesc">auto</a>. Line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③④">masonry axis</a> corresponds to the start of the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box③">masonry box</a> (the content-box start edge usually) and <a class="property" data-link-type="propdesc">auto</a> uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②⓪">grid container</a> padding edge as usual. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> is the extent of the tracks the item spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③①">grid axis</a> and the position of line 1 and the padding-box edge in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑤">masonry axis</a>.</p>
<p><a href="https://drafts.csswg.org/css-grid/#abspos-items">Grid-aligned absolute-positioned descendants</a> are supported. In the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③③">masonry axis</a> all <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-position" id="ref-for-grid-position">grid positions</a> except line 1 are treated as <a class="property" data-link-type="propdesc">auto</a>. Line 1 in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③④">masonry axis</a> corresponds to the start of the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box③">masonry box</a> (the content-box start edge usually) and <a class="property" data-link-type="propdesc">auto</a> uses the <a data-link-type="dfn" href="https://drafts.csswg.org/css-grid-2/#grid-container" id="ref-for-grid-container②⓪">grid container</a> padding edge as usual. The <a data-link-type="dfn" href="https://drafts.csswg.org/css-display-3/#containing-block" id="ref-for-containing-block①">containing block</a> is the extent of the tracks the item spans in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⑤">grid axis</a> and the position of line 1 and the padding-box edge in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑤">masonry axis</a>.</p>
<p class="issue" id="issue-7bbe63a7"><a class="self-link" href="#issue-7bbe63a7"></a> It might be useful to define a static position in the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑥">masonry axis</a>. Maybe it could defined as the max (or min?) current <a data-link-type="dfn" href="#running-position" id="ref-for-running-position⑥">running position</a> of the <a data-link-type="dfn">grid-axis</a> tracks at that point? Or the end of the item before it?</p>
<p class="issue" id="issue-b2e5048b"><a class="self-link" href="#issue-b2e5048b"></a> It would also be useful to be able to align the <a data-link-type="dfn" href="#masonry-box" id="ref-for-masonry-box④">masonry box</a> end edge somehow, but for that we need a way to address the <a href="https://github.com/w3c/csswg-drafts/issues/2402">end line in an implicit grid</a>, or could we just use any non-auto line number other than 1 to indicate the end line given that we don’t really have any lines in this axis other than line 1?</p>
<h2 class="heading settled" data-level="10" id="performance-notes"><span class="secno">10. </span><span class="content"> Performance Notes</span><a class="self-link" href="#performance-notes"></a></h2>
<p>In general, masonry layout should have significantly better performance than the equivalent regular (2-axis) grid layout, particularly when the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑦">masonry axis</a> is the block-axis since the intrinsic sizing of grid rows is typically quite expensive. Any intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③②">grid axis</a> should be cheaper too, because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout, contrary to a 2-axis grid where all items spanning an intrinsically-sized track contribute. That said, <span class="css">align-tracks: stretch</span> specifically adds a cost proportionate to the number of items that are resized. (Note that <span class="css">stretch</span> isn’t the default value for these properties though.) Stretched items do a second layout with the new size (when it actually changed) so this can be costly if there are a huge amount of stretched items that each contains a lot of content. Especially nested stretched masonry layouts should be avoided unless they are small/trivial.</p>
<p>In general, masonry layout should have significantly better performance than the equivalent regular (2-axis) grid layout, particularly when the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑦">masonry axis</a> is the block-axis since the intrinsic sizing of grid rows is typically quite expensive. Any intrinsic track sizing in the <a data-link-type="dfn" href="#grid-axis" id="ref-for-grid-axis③⑥">grid axis</a> should be cheaper too, because, typically, only a subset of items contribute to the intrinsic sizing in a masonry layout, contrary to a 2-axis grid where all items spanning an intrinsically-sized track contribute. That said, <span class="css">align-tracks: stretch</span> specifically adds a cost proportionate to the number of items that are resized. (Note that <span class="css">stretch</span> isn’t the default value for these properties though.) Stretched items do a second layout with the new size (when it actually changed) so this can be costly if there are a huge amount of stretched items that each contains a lot of content. Especially nested stretched masonry layouts should be avoided unless they are small/trivial.</p>
<p><strong class="advisement"> This can be ameliorated by the author by opting out from the stretching on most items though, e.g. specifying <span class="css">align-items:start</span> and then opting in for just a few items with <span class="css">align-self:stretch</span> to let those items fill the <a data-link-type="dfn" href="#masonry-axis" id="ref-for-masonry-axis③⑧">masonry axis</a>. Other <a class="property" data-link-type="propdesc" href="#propdef-justify-tracks" id="ref-for-propdef-justify-tracks②">justify-tracks</a> / <a class="property" data-link-type="propdesc" href="#propdef-align-tracks" id="ref-for-propdef-align-tracks④">align-tracks</a> values such as <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-center" id="ref-for-valdef-self-position-center①">center</a>, <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end" id="ref-for-valdef-self-position-end①">end</a> and '<a class="production css" data-link-type="type" href="https://drafts.csswg.org/css-align-3/#typedef-content-distribution" id="ref-for-typedef-content-distribution②" title="Expands to: space-around | space-between | space-evenly | stretch">&lt;content-distribution></a>' (other than <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-align-3/#valdef-align-self-stretch" id="ref-for-valdef-align-self-stretch①">stretch</a>) shouldn’t be a problem though since they just reposition the items which is fast. (This performance analysis is from a Gecko perspective, but I suspect there’s some truth to it for other layout engines as well.)</strong></p>
<h2 class="heading settled" data-level="11" id="graceful-degradation"><span class="secno">11. </span><span class="content"> Graceful Degradation</span><a class="self-link" href="#graceful-degradation"></a></h2>
<p>Typically, a masonry design can be expected to degrade quite nicely in a UA that supports Grid layout but not masonry layout if the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid" id="ref-for-propdef-grid①">grid</a>/<a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-grid-2/#propdef-grid-template" id="ref-for-propdef-grid-template">grid-template</a> shorthands are avoided and the longhands are used instead. e.g.</p>
@ -3215,27 +3215,29 @@ Performance Notes</a> <a href="#ref-for-masonry-axis③⑧">(2)</a>
Masonry Layout</a> <a href="#ref-for-grid-axis①">(2)</a> <a href="#ref-for-grid-axis②">(3)</a>
<li><a href="#ref-for-grid-axis③">2.2.
Grid Item Placement</a> <a href="#ref-for-grid-axis④">(2)</a> <a href="#ref-for-grid-axis⑤">(3)</a>
<li><a href="#ref-for-grid-axis⑥">2.4.
Masonry Layout Algorithm</a> <a href="#ref-for-grid-axis⑦">(2)</a> <a href="#ref-for-grid-axis⑧">(3)</a> <a href="#ref-for-grid-axis⑨">(4)</a> <a href="#ref-for-grid-axis①⓪">(5)</a> <a href="#ref-for-grid-axis①①">(6)</a> <a href="#ref-for-grid-axis①②">(7)</a> <a href="#ref-for-grid-axis①③">(8)</a> <a href="#ref-for-grid-axis①④">(9)</a> <a href="#ref-for-grid-axis①⑤">(10)</a> <a href="#ref-for-grid-axis①⑥">(11)</a>
<li><a href="#ref-for-grid-axis①⑦">2.5.
<li><a href="#ref-for-grid-axis⑥">2.3.
Grid Axis Track Sizing</a> <a href="#ref-for-grid-axis⑦">(2)</a> <a href="#ref-for-grid-axis⑧">(3)</a> <a href="#ref-for-grid-axis⑨">(4)</a>
<li><a href="#ref-for-grid-axis①⓪">2.4.
Masonry Layout Algorithm</a> <a href="#ref-for-grid-axis①①">(2)</a> <a href="#ref-for-grid-axis①②">(3)</a> <a href="#ref-for-grid-axis①③">(4)</a> <a href="#ref-for-grid-axis①④">(5)</a> <a href="#ref-for-grid-axis①⑤">(6)</a> <a href="#ref-for-grid-axis①⑥">(7)</a> <a href="#ref-for-grid-axis①⑦">(8)</a> <a href="#ref-for-grid-axis①⑧">(9)</a> <a href="#ref-for-grid-axis①⑨">(10)</a> <a href="#ref-for-grid-axis②⓪">(11)</a>
<li><a href="#ref-for-grid-axis②①">2.5.
The masonry-auto-flow Property</a>
<li><a href="#ref-for-grid-axis①⑧">3.
<li><a href="#ref-for-grid-axis②②">3.
Containing Block</a>
<li><a href="#ref-for-grid-axis①⑨">4.
The Implicit Grid </a> <a href="#ref-for-grid-axis②⓪">(2)</a> <a href="#ref-for-grid-axis②①">(3)</a> <a href="#ref-for-grid-axis②②">(4)</a>
<li><a href="#ref-for-grid-axis②③">6.
<li><a href="#ref-for-grid-axis②③">4.
The Implicit Grid </a> <a href="#ref-for-grid-axis②④">(2)</a> <a href="#ref-for-grid-axis②⑤">(3)</a> <a href="#ref-for-grid-axis②⑥">(4)</a>
<li><a href="#ref-for-grid-axis②⑦">6.
Alignment and Spacing</a>
<li><a href="#ref-for-grid-axis②④">6.1.
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-grid-axis②⑤">(2)</a>
<li><a href="#ref-for-grid-axis②⑥">6.4.
<li><a href="#ref-for-grid-axis②⑧">6.1.
The align-tracks and justify-tracks Properties </a> <a href="#ref-for-grid-axis②⑨">(2)</a>
<li><a href="#ref-for-grid-axis③⓪">6.4.
Baseline Alignment in the Masonry Axis</a>
<li><a href="#ref-for-grid-axis②⑦">7.1.
Fragmentation in the Masonry Axis</a> <a href="#ref-for-grid-axis②⑧">(2)</a> <a href="#ref-for-grid-axis②⑨">(3)</a>
<li><a href="#ref-for-grid-axis③⓪">7.2.
<li><a href="#ref-for-grid-axis③①">7.1.
Fragmentation in the Masonry Axis</a> <a href="#ref-for-grid-axis③②">(2)</a> <a href="#ref-for-grid-axis③③">(3)</a>
<li><a href="#ref-for-grid-axis③④">7.2.
Fragmentation in the Grid Axis</a>
<li><a href="#ref-for-grid-axis③①">9.
<li><a href="#ref-for-grid-axis③⑤">9.
Absolute Positioning</a>
<li><a href="#ref-for-grid-axis③②">10.
<li><a href="#ref-for-grid-axis③⑥">10.
Performance Notes</a>
</ul>
</aside>