Overview.bs

<pre class='metadata'>
Title: CSS Grid Layout Module Level 3
Shortname: css-grid
Level: 3
Status: ED
Work Status: Revising
Group: csswg
TR:  https://www.w3.org/TR/css-grid-3/
ED: https://drafts.csswg.org/css-grid-3/
Editor: Tab Atkins Jr., Google, http://www.xanthir.com/contact/, w3cid 42199
Editor: Elika J. Etemad / fantasai, Apple, http://fantasai.inkedblade.net/contact, w3cid 35400
Former Editor: Mats Palmgren, Mozilla, mailto:mats@mozilla.com
Editor: Jen Simmons, Apple, http://jensimmons.com/, w3cid 52801
Editor: Brandon Stewart, Apple, https://brandonstewart.net, w3cid 138640
Abstract: This module introduces masonry layout as an additional layout mode for <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a> containers.
WPT Path Prefix: css/css-grid/masonry/tentative/
WPT Display: open
Markup Shorthands: css yes
Status Text: <strong>This specification represents two variations on the proposal for masonry layout. Feedback on the alternatives is welcome.</strong>
Ignored Terms: display, used value, computed value, repeat(), content box, containing block, margin boxes,
Ignore MDN Failure: #tracks-alignment, #masonry-auto-flow
</pre>

<pre class=link-defaults>
spec: css-align-3;
	type: value; for: align-content;
		text: center;
		text: stretch;
	type: dfn; text: alignment baseline;
spec: css-cascade-5
	type: dfn; text: shorthand property;
spec: css-grid-2;
	type: dfn;
		text: auto-placement algorithm
		text: computed track list
		text: collapsed grid track
	type: value; text: grid; for: display
</pre>


<style>
:is(section, p).option {
	border-right: 1em double;
	padding-right: 1em;
}
:is(section, p).option.grid {
	border-right-color: #be2596;
}
:is(section, p).option.masonry {
	border-right-color: #96be25;
}
:is(span, a).option {
	font-weight: bold;
}
:is(span, a).option * {
	color: inherit;
}
:is(span, a).option.grid {
	color: #be2596;
}
:is(span, a).option.masonry {
	color: #658118
}
</style>


<h2 id='intro'>
Introduction</h2>

	<em>This section is not normative.</em>

	Grid Layout is a layout model for CSS
	that has powerful abilities to control the sizing and positioning
	of boxes and their contents.
	Grid Layout is optimized for 2-dimensional layouts:
	those in which alignment of content is desired in both dimensions.

	<figure>
		<img src="images/grid-layout.png"
		     alt="An example of grid layout:
		     two rows of items,
		     the first being four items &mdash; the last of which spans both rows,
		     and the second being two items &mdash;
		     the first of which spans the first two columns &mdash;
		     plus the spanned item from the first row.">
		<figcaption>Representative Grid layout example</figcaption>
	</figure>

	Although many layouts can be expressed with regular Grid Layout,
	restricting items into a grid in both axes also makes it impossible
	to express some common layouts on the Web.

	This module defines a layout system that removes that restriction
	so that items can be placed into Grid-like tracks in just one of the axes,
	while stacking them one after another in the other axis.
	Items are placed into the column (or row) with the most remaining space
	based on the layout size of the items placed so far.
	This module also extends <a href="https://www.w3.org/TR/css-grid-2/">CSS Grid</a>
	with this new grid item placement strategy
	and <a href="https://drafts.csswg.org/css-align">CSS Box Alignment</a> with new alignment features.

<h3 id='background'>
Background and Motivation</h3>

<h4 id='waterfall'>
Waterfall Layout with Auto-placed Items</h4>

	[=Masonry layout=], sometimes also called “waterfall layout”,
	is a common Web design pattern where a number of items--
	commonly images or short article summaries--
	are placed one by one into columns
	in a way that loosely resembles stone masonry.
	Unlike [[CSS-MULTICOL-1|multi-column layout]],
	where content is placed vertically in the first column
	until it must spills over to the second column,
	[=masonry layout=] selects a column for each new item
	such that it is generally closer to the top of the layout than items placed later.

	<div class="example">
		The Pinterest search results page exemplifies this layout:

		<figure>
			<img src="images/pinterest.png"
			     alt="An example of masonry layout:
			          four columns of items,
			          each item is placed into the column with the smallest height so far.">
			<figcaption>Representative masonry layout example</figcaption>
		</figure>

		Here, each item has a different height
		(depending on the content and the width of the column),
		and inspecting the DOM reveals
		(as the visual content itself gives no indication of ordering)
		that each item has been placed into the column with the smallest height so far.
	</div>

	This layout superficially looks similar to multi-column layout;
	but it has the advantage that scrolling down
	will naturally lead to "later" items in the layout
	(that is, those less relevant in the search results).

	It's not possible to achieve this layout using earlier CSS layout models,
	unless you know up-front how tall each item will be,
	or use JavaScript for content measurement or placement.

	Using a [=masonry container=] together with ''grid-area/auto''-positioned items
	yields this type of masonry layout.

<h4 id='collapse'>
One-dimensional Grid Layout</h4>

	[=Grid layout=] allows for powerful track sizing and explicit placement in two axes,
	but sometimes a layout only needs alignment of its items in one dimension.

	Using a [=masonry container=] together with explicitly-positioned items
	allows for this type of one-dimensional grid layout.

	<div class="example">
		This example <a href="https://github.com/w3c/csswg-drafts/issues/10233#issuecomment-2071279204">by Douglas Graham</a>
		uses explicit positioning to place each item into its assigned column;
		but there are no rows.
		Instead, items in each column stack one after the other.
		This layout can't be duplicated in [=grid layout=]
		because the “spanning” relationships among the items in adjacent columns
		is not fixed: it depends on their relative heights
		and whether the optional banner or advertisement items are included.
		It also can't be duplicated in [=flex layout=]
		because the source order of the items
		(which is used for reading, sequential navigation, and one-column mobile phone layout)
		goes back and forth between the two columns.

		<figure>
			<!-- https://codepen.io/TabAtkins/pen/abeoBOm -->
			<img src="images/masonry-page-layout.png"
			     alt="In one-column layout:
			          the header, followed by an optional banner, the secondary navigation,
			          the main content area, an advertisement block, and finally the footer.
			          In two-column layout:
			          the header spanning both columns on top,
			          the footer spanning both columns at the bottom,
			          in the wider left column the optional banner followed by the main content area,
			          and in the narrow left column the secondary navigation followed by the advertisement block.">
			<figcaption>
				Comparison of one-column and two-column variants of a one-dimensional grid layout.
			</figcaption>
		</figure>
	</div>


<h3 id="values">
Value Definitions</h3>

	This specification follows the <a href="https://www.w3.org/TR/CSS2/about.html#property-defs">CSS property definition conventions</a> from [[!CSS2]]
	using the <a href="https://www.w3.org/TR/css-values-3/#value-defs">value definition syntax</a> from [[!CSS-VALUES-3]].
	Value types not defined in this specification are defined in CSS Values &amp; Units [[!CSS-VALUES-3]].
	Combination with other CSS modules may expand the definitions of these value types.

	In addition to the property-specific values listed in their definitions,
	all properties defined in this specification
	also accept the <a>CSS-wide keywords</a> as their property value.
	For readability they have not been repeated explicitly.

<h2 id='masonry-model'>
Masonry Layout Model</h2>

	<dfn>Masonry layout</dfn>
	lays out items into pre-defined tracks similar to [=grid layout=] in one axis
	(called the <dfn local-lt="grid-axis">grid axis</dfn>),
	but flows them freely similar to [=flex layout=] in the other
	(called the <dfn local-lt="stacking-axis">stacking axis</dfn>).
	Similar to [=grid layout=] and unlike [=flex layout=],
	[=masonry layout=]’s auto-placement
	distributes items across the tracks  to keep the lengths of those tracks
	as similar as possible.

	[=Grid items=] are formed and [=blockified=]
	exactly the same as in a regular [=grid container=].

	(For clarity, [=grid items=] and [=grid tracks=] of a [=masonry container=]
	can be referred to as <dfn export lt="masonry item">masonry items</dfn>
	and <dfn export lt="masonry track">masonry tracks</dfn>.)

	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.

	Note: Subgrid items are supported,
	but subgridding only occurs in the [=grid axis=];
	see [[#subgrids]] for details.

	A <dfn>masonry container</dfn> is a box whose contents participate in [=masonry layout=].
	A [=masonry container=] is a <dfn export>column masonry container</dfn>
	if its [=stacking axis=] is the [=block axis=],
	or a <dfn export>row masonry container</dfn>
	if its [=stacking axis=] is the [=inline axis=].

	<table class=data>
		<caption>Comparing Masonry Containers</caption>
		<tr>
			<th style="writing-mode: vertical-rl; writing-mode: sideways-lr">
				Column Masonry
			<td>
				<pre>
					grid-template-columns: 1fr 2fr 3fr;
				</pre>
			<td>
				<img src="images/masonry-columns.png"
					alt="Column masonry lays out items in columns,
					     but ordered across the columns,
					     placing each item in the then-shortest column.">
		<tr>
			<th style="writing-mode: vertical-rl; writing-mode: sideways-lr">
				Row Masonry
			<td>
				<pre>
					grid-template-rows: 1fr 2fr 3fr;
				</pre>
			<td>
				<img src="images/masonry-rows.png"
					alt="Row masonry lays out items in rows,
					     but ordered down across the rows,
					     placing each item in the then-shortest row.">
	</table>

<h3 id="order-accessibility">
Reordering and Accessibility</h3>

	Although [=masonry layout=] generally progresses in a forwards fashion
	(placing the next item down or endward of the current item,
	matching the natural "reading order"),
	it can switch between these two in a seemingly arbitrary manner.
	In simple cases, the 'item-tolerance' property can help reduce
	the feeling of backtracking due to small sizing differences in the [=block axis=]
	when laying out auto-placed items.
	But when [[#masonry-layout-algorithm|auto-placement]] is mixed with [=definite position|explicit placement=] or spanning items,
	some amount of backtracking may occur.

	<div class=example>
		For example, in the following markup sample,
		the fourth item is a spanner that doesn't fit
		in the remaining empty column on the first line.
		It ends up positioned into the into the first column,
		which is the highest available space into which it will fit.
		The next few items, which have a span of 1,
		end up laying out “above” it in the empty column,
		violating the natural reading order.

		<xmp highlight=html>
			<section class=masonry>
			  <div class=item>1</div>
			  <div class=item>2</div>
			  <div class="item tall">3</div>
			  <div class="item wide">4</div>
			  <div class=item>5</div>
			  <div class=item>6</div>
			  <div class=item>7</div>
			</section>
			<style>
			.masonry {
				display: grid-lanes;
				grid-template-columns: repeat(5, auto);
			}
			.item { height: 50px; }
			.item.wide { grid-column: span 3; }
			.item.tall { height: 90px; }
			</style>
		</xmp>

		<figure>
			<img src="images/masonry-reorder-span.png"
			     alt="In this example, the first row is items 1, 2, 3, 5, 6,
			          with item 3 slightly taller than the others.
			          Item 4 spans the first three columns, and is placed
			          just below item 3, while item 7 is tucked under item 5.">
			<figcaption>Auto-placed masonry layout with mixed-height items and mixed span sizes</figcaption>
		</figure>
		Similarly, items explicitly placed into specific tracks can leave gaps behind them,
		into which subsequent auto-placed items can be placed visually out-of-order.
	</div>

	Authors should be aware of these possibilities
	and design layouts where such backtracking is minimized
	so that focus and reading order can be more easily followed.
	Alternatively, if the items do not have an inherent order,
	use the 'reading-flow' property to allow the UA to re-order the items
	for reading and linear navigation.

	ISSUE: Or should reordering be the default behavior for auto-placed items here?

	<div class=note>
		Techniques for reducing backtracking include:
		* Using appropriate values for 'item-tolerance',
			i.e. values large enough to avoid gratuitous differentiation among similarly-sized tracks,
			but not so large that meaningful differences get ignored.
		* Using explicit placement in ways that help group related items together,
			rather than ways that disrupt the natural order of items
		* Avoiding the combination of mixed span sizes in the [=grid axis=]
			and disparate item sizes in the [=stacking axis=],
			which can cause items to get pulled out of order (see example above).
	</div>

	As with [=grid layout=] and [=flex layout=]
	authors can use the 'order' property to re-order items;
	the same caveats apply.
	See [[css-grid-2#order-accessibility]]
	and [[css-display-4#order-accessibility]].

<h3 id="masonry-switch">
Establishing Masonry Layout</h3>

	<pre class="propdef partial">
	Name: display
	New values: grid-lanes | inline-grid-lanes
	</pre>

	<dl dfn-for="display" dfn-type=value>
		<dt><dfn>grid-lanes</dfn>
		<dd>
			This value causes an element to generate a [=block-level=] [=masonry container=] box.

		<dt><dfn>inline-grid-lanes</dfn>
		<dd>
			This value causes an element to generate an [=inline-level=] [=masonry container=] box.
	</dl>

	A [=masonry container=] that is not [=subgridded=] in its [=grid axis=] establishes
	an [=independent formatting context=]
	for its contents.


	<div class=issue>
	ISSUE(12820): Write up how grid/masonry formatting contexts work more formally?
	</div>

<h2 id="masonry-track-templates">
Masonry Track Specification</h2>

	In the [=grid axis=],
	the full power of [=grid layout=] is available for track specification:
	* Track sizes, line names, and areas can be specified on the [=masonry container=]’s [=grid axis=],
		just like in [=grid layout=].
	* The [=explicit grid=] and [=implicit grid=] are formed in the same way as for a regular [=grid container=].
	* Items can be [[#masonry-track-placement|placed]] against these grid templates just as in [=grid layout=].

	However,
	auto-placed items contribute sizing to all tracks,
	not just the track into which they are ultimately placed;
	see [[#track-sizing]].

	Note: This is because auto-placed items must be laid out <em>as</em> they are placed,
	so that each track knows how “full” it is
	(and therefore which track should receive the next auto-placed item);
	thus, the tracks themselves must already have a definite size
	so that the items know their [=available space=] during layout.

<h3 id="masonry-track-grid-option">
Declaring Masonry Track Templates: the 'grid-template-*' properties</h3>

	The 'grid-template-*' and 'grid-auto-rows'/'grid-auto-columns' properties
	(and their shorthands)
	apply in the [=grid axis=] of the [=masonry container=]
	and establish tracks just as on regular [=grid containers=].
	(They are ignored in the [=stacking axis=].)

<h4 id=masonry-intrinsic-repeat>
Intrinsic Tracks and repeat()</h4>

	ISSUE(10915): Should we allow auto-repeated content-based tracks?
	Is this a reasonable definition for them?
	Should they work also in Grid Layout somehow?

	In Grid Layout,
	all [=grid items=] are placed in the grid
	<em>before</em> the grid tracks are sized.
	This implies that ''repeat()/auto-fill''/''repeat()/auto-fit'' repetition
	can't include intrinsically sized tracks such as ''grid-template-rows/auto''
	(either in the ''repeat()'' function <em>or</em> alongside it
	in the fixed portion of the track list),
	as that would require the layout algorithm
	to have already determined which items would go in those tracks,
	to determine how large the tracks are,
	to determine how many repetitions fit in the available space.

	In Masonry Layout,
	as [=masonry item=] placement and layout are intertwined and somewhat simplified,
	this restriction is no longer strictly required.
	It requires a slightly heuristic definition of sizing,
	but auto repetition <em>can</em> include intrinsically-sized tracks
	in a [=masonry container=].

	<div algorithm="determine intrinsic repetitions">
		To determine the number of repetitions
		that a ''repeat()'' function resolves to,
		resolve the repeated track sizing functions to definite sizes
		by initializing the track sizes (per [[css-grid-2#algo-init]])
		and resolving intrinsic track sizes (per [[css-grid-2#algo-content]])
		in accordance with [[#track-sizing]]
		with the following assumptions:

		* Expand ''repeat()/auto-fill''/''repeat()/auto-fit'' repeat functions once.
		* Ignore explicit item placement.
			(That is, assume all items have an [=automatic position=].)
		* Do not [=collapsed grid track|collapse=] any tracks.
		* If a [=masonry item=] has a span larger than 1,
			then for each of its intrinsic size contributions,
			first subtract the combined size of the gaps it would span,
			and divide by its span.
			Then treat it as an item that has a span of 1
			and these modified intrinsic size contributions.

		All tracks are then treated as having the size
		calculated by this simplified layout
		(including those in ''repeat()'' arguments,
		taking from their corresponding single repetition)
		for the purpose of determining how many repetitions
		the ''repeat()'' functions resolve to.
	</div>

	<details class=note>
		<summary>Motivation</summary>

		This simplified layout heuristic is defined to be "good enough",
		while remaining fast and consistent.

		Ignoring placement is required just to make the concept coherent;
		before you know how many repetitions you need,
		you can't tell what track an item with a definite placement
		will end up in.

		By chopping spanning items into span-1 items,
		this avoids the possible need to expand a repeat() multiple times,
		and the incoherent possibility of getting different sizes
		for the same keyword across the repetitions.

		It also makes the layout as a whole significantly cheaper,
		as you only need to consider each unique track size;
		you don't even <em>really</em> need to do any repeat() expansion.
		That is, in ''auto repeat(auto-fill, min-content auto)'',
		both of the ''grid-template-rows/auto'' keywords
		will resolve to the same size under this heuristic layout;
		you can just figure out what
		a ''grid-template-columns/auto''
		and ''grid-template-columns/min-content'' track sizes
		would each result in,
		and use those sizes.
	</details>

<h3 id="subgrids">
Subgrids</h3>

	[=Subgridding=] allows nested [=masonry containers=] (and [=grid containers=])
	to share track sizes.
	If the parent's corresponding axis is a [=grid axis=],
	the subgridded axis is taken from the parent container
	[[css-grid-2#subgrids|as specified for grid containers]];
	if the parent's corresponding axis is a [=stacking axis=],
	the subgridded axis also acts as a [=stacking axis=].

	ISSUE: What if this conflicts with the masonry orientation, or results in both axes stacking?

	In [=masonry layout=], auto-placed [=subgrids=]
	don't inherit any line names from their parent grid,
	because that would make the placement of the item
	dependent on layout results;
	but the subgrid's tracks are still aligned to the parent's tracks as usual.

	<div class="example">
		Here's a subgrid <a href="examples/subgrid-example-1.html">example</a>:

		```css
		<style>
		.grid {
		  display: inline-grid-lanes;
		  grid-template-rows: auto auto 100px;
		  align-content: center;
		  height: 300px;
		  border: 1px solid;
		}

		.grid > * {
		  margin: 5px;
		  background: silver;
		}
		.grid > :nth-child(2n) {
		  background: pink;
		}

		.grid subgrid {
		  display: grid;
		  grid: subgrid / subgrid;
		  grid-row: 2 / span 2;
		  grid-gap: 30px;
		}
		.grid subgrid > * { background: cyan; }
		</style>
		```
		```html
		<div class="grid">
		  <item>1</item>
		  <item>2</item>
		  <item>3</item>
		  <subgrid>
		    <item style="height:100px">subgrid.1</item>
		    <item>sub.2</item>
		    <item>s.3</item>
		  </subgrid>
		  <item>4</item>
		  <item>5</item>
		  <item style="width: 80px">6</item>
		  <item>7</item>
		</div>
		```

		<figure>
			<img src="images/subgrid-example-1.png">
			<figcaption>
				The rendering of the subgrid example above.
			</figcaption>
		</figure>

		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 position
		so we know which tracks it will occupy.
		Note also that trying to subgrid the parent's [=stacking axis=]
		results in the subgrid getting [=masonry layout=] in its [=inline axis=].
	</div>

	A [=subgrid=] that is a [=masonry container=]
	can be referred to as a <dfn export>submasonry</dfn>.

<h3 id="repeat-notation">
Track Repetition: the ''repeat()'' notation</h3>

	This specification introduces new keywords and masonry-specific behavior
	for the ''repeat()'' notation.

<h4 id="repeat-auto-areas">
repeat(auto-areas)</h4>

	The new <dfn value for="repeat()">auto-areas</dfn> value for the ''repeat()'' notation
	represents the number of repetitions necessary
	for the total number of explicit tracks to match
	the 'grid-template-areas' value
	in effect in the corresponding axis.
	If multiple tracks are listed for the repetition,
	the final repetition is truncated as necessary
	to produce the correct number of tracks.

	Note: Unlike ''repeat()/auto-fit''--
	which always repeats at least once and always repeats the track listing entirely--
	the number of repetitions for ''repeat()/auto-areas'' can be zero
	(if there are already enough explicit tracks),
	and the final repetition can be partial.

	If 'grid-template-areas' is ''grid-template-areas/none'',
	this value behaves as ''auto-fit''.

	Note: This value applies both to regular [=grid containers=] and to [=masonry containers=].

	ISSUE(10854): It's unclear if we actually need this value.
	Note that the explicit grid already takes values from 'grid-auto-columns'/'grid-auto-rows'
	as needed to match the number of template areas.

<h4 id="repeat-auto-fit">
repeat(auto-fit)</h4>

	In [=masonry containers=] (as in regular [=grid containers=])
	''repeat()/auto-fit'' acts like ''repeat()/auto-fill'',
	but with empty tracks [=collapsed grid tracks|collapsed=].
	However, because placement occurs after track sizing,
	[=masonry containers=] use a heuristic
	to determine if a track will be occupied:

	* All tracks occupied by explicitly placed items are considered occupied.
	* With the sum of the spans of all auto-placed items as <var>N</var>,
		all unoccupied tracks up to the <var>N</var>th such track
		are considered occupied.

	All tracks produced by the ''repeat()/auto-fit'' repetition and considered unoccupied by this heuristic
	are assumed “empty” and are [=collapsed grid tracks|collapsed=].
	A [=collapsed grid track=] cannot accept placement of auto-placed items.

	Note: It is possible for an auto-placed item to be placed in a track when ''repeat()/auto-fill'' is used
	that would be collapsed if ''repeat()/auto-fit'' is used
	if there are auto-placed items with a span greater than 1
	mixed with explicitly-placed items that leave gaps too small for the auto-placed items.

<h3 id="track-sizing">
Grid Axis Track Sizing</h3>

	Track sizing works the same as in [[css-grid-2#algo-track-sizing|CSS Grid]],
	except that when considering which items contribute to intrinsic sizes:
	* All items explicitly placed in that track contribute, and
	* All items with an [=automatic grid position=] contribute
		(regardless of whether they are ultimately placed in that track).

	<div class="example">
		For example, suppose there are two columns in the [=grid axis=]
		and that
		* Items A, B, and C have no explicit position.
		* Item D is explicitly placed into the first column.

		In this case, items A, B, C, and D all contribute to sizing the first column,
		while only A, B, and C (and not D) contribute to the second column.
	</div>

	In the case of spanning items with an [=automatic grid position=],
	they are assumed to be placed at every possible start position,
	and contribute accordingly.

	<div class="example">
		For example, suppose there are 5 columns in the [=grid axis=],
		with the middle having a fixed size of ''100px''
		and the other two being ''grid-template/auto''-sized.
		For the purpose of track sizing,
		an item that spans 2 tracks
		and has an intrinsic contribution of 220px
		is essentially copied and assumed to exist:

		* At grid line 1,
			contributing 110px to each of the first two tracks.
		* At grid line 2,
			contributing 120px to the second track.
		* At grid line 3,
			contributing 120px to the fourth track.
		* At grid line 4,
			contributing 110px to the fourth and fifth tracks.
	</div>

	Note: This algorithm ensures that each track is at least big enough
	to accommodate every item that is ultimately placed in it,
	and does not create dependency cycles between placement and track sizing.
	However, depending on the variation in sizes,
	tracks could be larger than necessary:
	an exact fit is only guaranteed if
	all items are explicitly placed in the [=grid axis=]
	or all items are the same size
	(or matching multiples of that size, in the case of spanning items).

<h4 id="track-sizing-subgrid">
Subgrid Item Contributions</h4>

	When sizing the tracks of either a regular [=grid container=] or a [=masonry container=],
	a [=submasonry=] has special handling of items that have an [=automatic grid position=]:
	*  Any such item is placed into every possible grid track
		that could be spanned by the [=submasonry=].
		(If the submasonry has a [=definite grid position=], thus only the spanned tracks;
		if it has an [=automatic grid position=], then all tracks in the parent grid.)
	* Any such item receives the largest margin/border/padding contribution
		of each edge at which it could hypothetically be placed.
		If the item spans the entire subgrid, it receives both.
		(See <a href="https://www.w3.org/TR/css-grid-2/#subgrid-item-contribution">CSS Grid Layout &sect;9</a>.)

<h4 id="track-sizing-performance">
Optimized Track Sizing</h4>

	Track sizing can be optimized by aggregating items
	that have the same span size and placement
	into a single virtual item
	as follows:

	<ol>
		<li>
			Separate all the [=masonry items=] into <dfn>item groups</dfn>, according to the following properties:

			* the span of the item
			* the placement of the item,
				i.e. which tracks it is allowed to be placed in
			* the item's [=baseline-sharing group=]

			Note: For example, an item with span 2 placed in the second track
			will be in a different group than an item with span 2 that has an [=automatic grid position=].

		<li>
			For each [=item group=], synthesize a <dfn>virtual masonry item</dfn>
			that has the maximum of every intrinsic size contribution
			among the items in that group.

			If the items apply [=baseline alignment=],
			determine the baselines of the [=virtual masonry item=]
			by placing all of its items into a single hypothetical grid track
			and finding their shared baseline(s) and shims.
			Increase the group's intrinsic size contributions accordingly.

		<li>
			Place hypothetical copies of each [=virtual masonry item=] into the [=grid axis=] tracks
			in every position that the item could potentially occupy,
			and run the [[css-grid-2#algo-track-sizing|track sizing algorithm]] with those items.
			The resulting track sizes are the [=masonry container's=] track sizes.
	</ol>

	Note: This optimization should give the same results
	as the track sizing description [[#track-sizing|above]];
	if not this is an error, please
	<a href="https://github.com/w3c/csswg-drafts/issues">report it to the CSSWG</a>.

<h2 id="masonry-track-placement">
Masonry Placement</h2>

	In the [=grid axis=],
	items can be <em>explicitly placed</em> into tracks and span them using the familiar [=grid-placement properties=]’ syntax.
	Auto-placement, however, uses the [[#masonry-layout-algorithm]],
	placing each item with an [=automatic grid position=]
	into the “shortest” masonry track available.

	<div class="example">
		Here's a masonry layout <a href="examples/pinterest-with-span.html">example</a>
		demonstrating placed and spanning items:

		<figure>
			<img src="images/example-pinterest-with-span.png">
			<figcaption>Rendering of the example above.</figcaption>
		</figure>

		ISSUE: Need a better example!!!
	</div>

<h3 id="masonry-placement-grid-option">
Specifying Masonry Item Placement: the 'grid-column-*' and 'grid-row-*' properties</h3>

	The 'grid-column-*' and 'grid-row-*' properties
	(and their shorthands)
	apply in the [=grid axis=] of the items
	and establish placement just as in regular [=grid layout=].


<h3 id=placement-tolerance oldids="item-slack">
Placement Precision: the 'item-tolerance' property</h3>

	<pre class=propdef>
	Name: item-tolerance
	Value: normal | <<length-percentage>> | infinite
	Initial: normal
	Percentages: relative to the [=grid-axis=] [=content box=] size of the [=masonry container=]
	Inherited: no
	Applies to: [=masonry containers=]
	Computed value: a computed <<length-percentage>> value
	Animation type: as length
	</pre>

	[=Masonry containers=] are filled
	by placing each [=masonry item=]
	in whichever [=masonry track=] is currently the least filled.
	When multiple tracks are tied for least-filled,
	placing the items in order looks good.
	But if tracks are only <em>very slightly</em> different heights,
	it can look strange to have them not fill in order,
	as the height differences aren't perceived as <em>meaningfully</em> different.

	The 'item-tolerance' property specifies what the threshold is
	for considering tracks to be “the same height”,
	causing them to fill in order.

	<dl dfn-type=value dfn-for=item-slack>
		: <dfn><<length-percentage>></dfn>
		:: Specifies the <dfn dfn for=masonry>tie threshold</dfn>
			for the [=masonry container=].
			Placement positions are considered to be equally good (“tied”)
			if they are within the specified distance
			from the shortest position.

			Note: The initial value is a “small” distance (''1em'')
			that is probably appropriate to represent “close enough”.

		: <dfn>normal</dfn>
		:: Resolves to a [=used value=] of ''1em'' in [=masonry layout=]
			and a [=used value=] of ''0'' in all other layout modes.
			<!-- This default is consistent with gaps. -->

		: <dfn>infinite</dfn>
		:: Specifies an infinite [=tie threshold=].
			This makes items distribute themselves strictly in order,
			without considering the length of the tracks at all.

			Note: This value can result in consecutive items being placed
			in dramatically different positions in the [=stacking axis=],
			which can be confusing to readers.
			If the initial value (`1em`) is too small,
			consider a larger value (such as `10em` or `50vh`)
			instead of `infinite`.

	</dl>

	Issue: Is ''1em'' the right default?

	ISSUE(10884): The CSSWG is open to better names for this property.

	Note: We expect to apply this property to [=flex layout=] in the future also,
	see <a href='https://github.com/w3c/csswg-drafts/issues/3071'>discussions</a>
	on how that might work.

<h3 id="masonry-dense-packing">
Dense Placement: the ''item-pack/dense'' keyword</h3>

	In [=grid layout=], ''grid-auto-flow: dense'' allows backtracking
	during the [[css-grid-2#auto-placement-algo|grid item placement algorithm]].
	The ''item-pack/dense'' keyword similarly allows backtracking
	during the [[#masonry-layout-algorithm|masonry placement algorithm]].
	However, because masonry placement and sizing are intertwined,
	an item can only backtrack into a compatible empty slot if
	the total used size of that slot’s tracks
	matches the used size of the item’s normal-placement tracks.

	Note: This restriction avoids laying out the item more than once.

<h3 id="masonry-layout-algorithm">
Masonry Layout and Placement Algorithm</h3>

	For each of the tracks in the [=grid axis=],
	keep a <dfn>running position</dfn> initialized to zero.
	Maintain also a <dfn>auto-placement cursor</dfn>,
	initially pointing to the first line.

	For each item in [=order-modified document order=]:
	<ol>
		<li>
			If the item has a [=definite grid position=] in the [=grid axis=],
			use that placement.

			ISSUE: Should this also update the placement cursor?

			Otherwise, resolve its [=grid axis=] placement using these substeps:

			<ol>
				<li>Starting at the first [=grid axis=] line in the [=implicit grid=],
					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 <var>max_pos</var>.
				<li>Repeat the previous step for each successive line number
					until the item would no longer fit inside the grid.
				<li>Let |possible lines| be the line that resulted in the smallest <var>max_pos</var>,
					and all lines that result in a <var>max_pos</var> within the [=tie threshold=] of this <var>max_pos</var>.
				<li>Choose the first line in |possible lines| greater than or equal to the [=auto-placement cursor=]
					as the item's position in the [=grid axis=];
					or if there are none such, choose the first one.
				<li>Update the [=auto-placement cursor=] to point to item's last line.
			</ol>

		<li>
			Place the item in its [=grid axis=] tracks
			at 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.
			Set the [=running position=] of the spanned  [=grid axis=] tracks
			to <code><var>max_pos</var> + [=outer size=] + 'grid-gap'</code>.

			For this purpose, the [=outer sizes=] of the box are floored at zero.

			Note: That is, if the box has sufficiently large negative margins,
			it won't somehow count as a negative <em>size</em> here.
			The [=running position=] of a track never decreases,
			so a negative-sized box
			won't cause future normally-sized items placed in the track
			to overlap previous items.

		<li>
			If the [=masonry container=] uses ''item-pack/dense'' packing,
			and there exists skipped empty space in the layout
			(e.g. due to spanning items)
			into which the item, as it is sized now,
			could have fit if it were placed earlier,
			and where the spanned tracks have the same total used size
			as the tracks into which it is currently placed,
			then instead place it into the highest such space.
			If there are multiple valid spaces within the [=tie threshold=] of the highest space,
			place it in the [=start=]-most of them.
			Rewind the [=auto-placement cursor=] and the [=running position=]
			to their values before this item’s placement.

			Items that <em>visually</em> intrude into preceding empty spaces
			(via negative margins, ''position: relative'', transforms, etc.),
			do not affect the size of those empty spaces.
			<span class=note>Later items might get placed in those spaces
			and visually overlap these previous items.</span>

			Note: Dense packing both ignores the [=auto-placement cursor=] when backfilling,
			and does not update it after placement.
			If there aren't any acceptable placement gaps to backfill, though,
			it places items exactly as when ''item-pack/dense'' were not specified.
	</ol>

	Note: This algorithm chooses the track
	that would result in the item being placed as highly as possible.
	If there are ties, it chooses the earliest such track,
	<em>after</em> the most recently placed item if possible
	(ensuring that it always “moves forward” even in the presence of ties).

<h4 id="containing-block">
Containing Block</h4>

	The [=containing block=] for a [=grid item=] participating in [=masonry layout=]
	is formed by its [=grid area=] in the [=grid axis=]
	and the [=grid container=]'s [=content box=] in the [=stacking axis=].

<h4 id="rtl-example">
Placement and Writing Modes</h4>

	Note: Like all of [=grid layout=],
	masonry layout and placement is sensitive to the [=writing mode=].
	For example, for ''direction: rtl'',
	items are placed right-to-left rather than left-to-right,
	whether the inline axis is a [=grid axis=] or a [=stacking axis=].

	<div class="example">
		Here's a simple <a href="examples/rtl-grid-axis.html">example</a> using ''direction: rtl'' in the [=grid axis=]:

		```css
		<style>
			.grid {
			  display: inline-grid-lanes;
			  direction: rtl;
			  grid-template-columns: repeat(4, 2ch);
			  border: 1px solid;
			}

			item { background: silver }
			item:nth-child(2n+1) {
			  background: pink;
			  height: 4em;
			}
			</style>
		```
		```html
			<div class="grid">
			  <item>1</item>
			  <item style="grid-column:span 2">2</item>
			  <item>3</item>
			  <item>4</item>
			</div>
		```

		<figure>
			<img src="images/rtl-grid-axis.png">
			<figcaption>Rendering of the ''direction: rtl'' example above.</figcaption>
		</figure>
	</div>

	<div class="example">
		Here's a simple <a href="examples/rtl-masonry-axis.html">example</a>
		using ''direction: rtl'' in the [=stacking axis=]:

		```css
			<style>
			.grid {
			  display: inline-grid-lanes;
			  direction: rtl;
			  width: 10ch;
			  column-gap: 1ch;
			  grid-template-rows: repeat(4, 2em);
			  border: 1px solid;
			}

			item { background: silver }
			item:nth-child(2n+1) {
			  background: pink;
			  width: 4ch;
			}
			</style>
		```
		```html
			<div class="grid">
			  <item>1</item>
			  <item style="grid-row:span 2">2</item>
			  <item>3</item>
			  <item>4</item>
			</div>
		```

		<figure>
			<img src="images/rtl-masonry-axis.png">
			<figcaption>Rendering of the ''direction: rtl'' example above.</figcaption>
		</figure>
	</div>

<h2 id="intrinsic-sizes">
Sizing Grid Containers</h2>

	[[css-grid-2#intrinsic-sizes|Sizing Grid Containers]] works the same as for regular [=grid containers=]
	but with the following addendum for the [=stacking axis=]:
	The <a>max-content size</a> (<a>min-content size</a>) of a [=grid container=] in the [=stacking axis=]
	is the size of the [=masonry box=] in that axis
	when sized under a <a>max-content constraint</a> (<a>min-content constraint</a>).

	<div class="example">
		Here's a simple <a href="examples/grid-intrinsic-sizing-example-1.html">example</a>:

		```css
			<style>
			.grid {
			  display: inline-grid-lanes;
			  grid-template-columns: 50px 100px auto;
			  grid-gap: 10px;
			  border: 1px solid;
			}
			item { background: silver; margin: 5px; }
			</style>
		```

		```html
			<div class="grid">
			  <item style="border:10px solid">1</item>
			  <item>2</item>
			  <item>3</item>
			  <item style="height:50px">4</item>
			  <item>5</item>
			  <item>6</item>
			</div>
		```

		<figure>
			<img src="images/grid-intrinsic-sizing-example-1.png">
			<figcaption>Rendering of the [=grid container=] intrinsic sizing example above.</figcaption>
		</figure>

	</div>


<h2 id="alignment">
Alignment and Spacing</h2>

	[[css-grid-2#gutters|Gutters]] are supported in both axes.
	In the [=stacking axis=],
	the gap is applied between the margin boxes of each pair of adjacent items.
	Margins do not collapse in either axis.

	In the [=grid axis=],
	[[css-grid-2#alignment|alignment]]
	works the same as in a regular [=grid container=].

	In the [=stacking axis=],
	[[css-align-3#content-distribution|content-distribution]] is applied
	to the content as a whole, similarly to how it behaves in block containers.
	More specifically, the <a>alignment subject</a> is the <dfn>masonry box</dfn>,
	which is the smallest rectangle bounding
	the [=margin boxes=] of all the [=grid items=].

	<figure>
		<img src="images/masonry-box.png">
		<figcaption>
			The extent of the [=masonry box=] is indicated by the dashed border.
			(Note that item 1 has a 5px bottom margin here.)
		</figcaption>
	</figure>

	Note: There is only ever one <a>alignment subject</a>
	for these properties in the [=stacking axis=],
	so the unique 'align-content' / 'justify-content' values boil down to
	''align-content/start'',
	''align-content/center'',
	''align-content/end'',
	and [=baseline alignment=].
	(The behavior of ''align-content/normal'' and ''align-content/stretch''
	is identical to ''align-content/start'',
	and the [=distributed alignment=] values behave as their [=fallback alignments=].)
	If the [=grid items=] overflow
	the [=grid container=]'s [=content box=] in the [=stacking axis=],
	then the [=masonry box=] will be larger than the [=grid container=]'s [=content box=].

	ISSUE: Should alignment in the stacking axis do something more sophisticated?
	What should that be?

<h3 id="masonry-baseline-alignment">
Baseline Alignment</h3>

	Item [=baseline alignment=] inside the [=grid axis=] tracks
	works as usual for a regular [=grid container=],
	and the [=grid container=]'s baseline is determined
	the same as for a regular [=grid container=] in that axis.

	[=Baseline alignment=] is not supported in the [=stacking axis=].
	The first baseline set of the [=grid container=] in this axis
	is generated from the highest [=alignment baseline=]
	among the [=grid items=] placed first in each track,
	and the last baseline set from the lowest [=alignment baseline=]
	among the [=grid items=] placed last in each track.

	ISSUE: We could support baseline alignment in the first row. Do we want to?

	ISSUE: Should the last baseline come from the last lowest item placed instead?

<h2 id="pagination">
Fragmentation</h2>

<h3 id="masonry-axis-pagination">
Fragmentation in the stacking axis</h3>

	Each [=grid axis=] track is fragmented independently in the [=stacking axis=].
	If a [=grid item=] is fragmented,
	or has a [=forced break=] before/after it,
	then the [=running position=] for the tracks that it spans in the [=grid axis=]
	are set to the size of the [=fragmentainer=]
	so that no further items will be placed in those tracks.
	An item that is split into multiple fragments
	retains its placement in the [=grid axis=] 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.

	<div class="example">
		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%">
			<video style="max-width:100%" src="images/fragmentation-block-axis-example.mp4" controls></video>
			<figcaption>
				Visualization of fragmentation in a [=block-axis=] [=masonry layout=].
			</figcaption>
		</figure>
	</div>

<h3 id="grid-axis-pagination">
Fragmentation in the Grid Axis</h3>

	Fragmentation in the [=grid axis=] with [=masonry layout=] in the other axis
	is also supported.
	In this case the fragmentation behaves more like in a regular [=grid container=];
	however, there's a separate step to determine which [=grid-axis=] track
	each item is placed into,
	before fragmentation occurs.

	<div class="example">
		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 [=grid-axis=] rows.
		It renders like this:
		<figure style="max-width:100%">
			<video style="max-width:100%" src="images/fragmentation-inline-axis-example.mp4" controls></video>
			<figcaption>
				Visualization of fragmentation in the [=block axis=] with [=inline-axis=] [=masonry layout=].
			</figcaption>
		</figure>
	</div>

<h2 id="abspos">
Absolute Positioning</h2>

	[[css-grid-1#abspos-items|Grid-aligned absolute-positioned descendants]] are supported
	in [=masonry containers=] just as for regular [=grid containers=];
	however, in the [=stacking axis=] there exist only two lines (in addition to the ''grid-area/auto'' lines) for placement:

	* line 1 (line -2) corresponds to the start edge of the [=masonry box=]
	* line 2 (line -1) corresponds to the end edge of the [=masonry box=]

	ISSUE: It might be useful to define a static position in the [=stacking axis=].
	Maybe it could defined as the max (or min?) current [=running position=]
	of the [=grid-axis=] tracks at that point?  Or the end of the item before it?

<h2 id="graceful-degradation">
Graceful Degradation</h2>

	Typically, a masonry design can be expected to degrade quite nicely
	in a UA that supports Grid layout but not masonry layout.

	<div class="example">

		Here's an <a href="examples/graceful-degradation-example.html">example</a>
		to illustrate this.

		```css
		  display: grid;
		  display: grid-lanes; /* ignored in UAs that don't support masonry layout */
		  grid-template-columns: 150px 100px 50px;
		```

		This creates a layout with three columns,
		but will have "more gaps" in the [=block axis=] if the UA doesn't support masonry layout.
		Here's what it looks like with Masonry support for comparison:

		<figure>
			<video src="images/graceful-degradation-example.mp4" controls></video>
			<figcaption>
				Rendering of the example in a UA with Masonry support.
			</figcaption>
		</figure>
	</div>

<!-- Big Text: item-*

████ █████▌ █████▌ █     █
 ▐▌    █▌   █▌     ██   ██        █   █
 ▐▌    █▌   █▌     █▌█ █▐█         █ █
 ▐▌    █▌   ████   █▌ █ ▐█ ████▌ ███████
 ▐▌    █▌   █▌     █▌   ▐█         █ █
 ▐▌    █▌   █▌     █▌   ▐█        █   █
████   █▌   █████▌ █▌   ▐█
-->

<h2 id="flow-control">
Appendix A: Generic Layout Item Flow Controls: the 'item-*' properties</h2>

	Issue: This section is likely to move to another spec,
	such as [[css-display-4]],
	since it affects multiple display types.

	Multiple layout modes in CSS place their children
	as atomic "items" organized into rows and/or colummns in their container,
	and allow the author to configure their ordering and placement.
	The 'item-*' properties provide generic controls for
	these ordering and placement options,
	encapsulating the layout-specific 'flex-flow' and 'grid-auto-flow' properties.

	<table class=data>
		<caption>Overview of Item Flow Controls</caption>
	<thead>
		<tr>
			<th>Flow-oriented Proposal
			<th>Track-oriented Proposal
			<th>Value Space
			<th>Description
			<th>Existing flex property
			<th>Existing grid property
	<tbody>
		<tr>
			<td>'item-direction'
			<td>'item-track'
			<td>auto | row | column | row-reverse | column-reverse
			<td>
				Controls whether items are placed into rows or columns,
				and whether within those tracks they are ordered
				start-to-end or end-to-start.
			<td>flex-direction
			<td>grid-auto-flow
		<tr>
			<td>'item-wrap'
			<td>'item-cross'
			<td>[ auto | nowrap | wrap ] || [ normal | reverse ] | wrap-reverse
			<td>
				Controls whether items are wrapped
				in the axis opposite to that controled by the row/column property,
				and if so if they are placed in start-to-end or end-to-start order.
			<td>flex-wrap
			<td>Introduced into 'grid-auto-flow' in this level.
		<tr>
			<td>'item-pack'
			<td>'item-pack'
			<td>normal | dense || balance
			<td>
				Configures how items are packed into their tracks.
			<td>
			<td>'grid-auto-flow'
		<tr>
			<td>'item-tolerance'
			<td>'item-tolerance'
			<td>normal | <<length-percentage>> | infinite
			<td>
				Defines a layout-specific amount of “slack” in placement decisions.
			<td>
			<td>
	</table>

	ISSUE(11480): The CSSWG is still figuring out how these properties should be named and fit together.

<h3 id="item-primary-axis">
Item Flow Axis: 'item-track'/'item-direction'</h3>

	<pre class=propdef>
	Name: item-direction, item-track
	Value: auto | row | column | row-reverse | column-reverse
	Initial: auto
	Percentages: N/A
	Inherited: no
	Applies to: [=flex containers=], [=grid containers=], [=masonry containers=]
	Computed value: as specified
	Animation type: discrete
	</pre>

	This property controls whether items are placed as rows or columns,
	and whether within those tracks they are ordered
	start-to-end or end-to-start.

	ISSUE(11480): There two open debates on this property:
	a) what should it be called and
	b) does it describe the primary direction of placement,
		or the orientation of the tracks into which items are placed;
		in other words, is the <dfn>primary axis</dfn> defined by this property
		the <dfn>primary placement axis</dfn> or the <dfn>primary track axis</dfn>.
	These are identical for [=flex layout=] and [=grid layout=],
	but differ for [=masonry layout=] whose primary placement direction
	is across its tracks.

	<dl dfn-type=value dfn-for="item-direction, item-track">
		: <dfn>auto</dfn>
		::
			Computes to either ''item-direction/row'' or ''item-direction/column''
			depending on the layout mode:
			* On [=flex containers=] and [=grid containers=],
				computes to ''item-direction/row''.
			* On [=masonry containers=],
				if 'grid-template-rows' is not ''grid-template-columns/none''
				and 'grid-template-columns' is ''grid-template-columns/none'',
				computes to the value representing row tracks;
				otherwise computes to the value representing column tracks.

		: <dfn>row</dfn>
		::
			<span class="option masonry">Track-oriented Option</span>
			Represents placement into rows,
			i.e. tracks or lines parallel to the [=inline axis=].
			Items fill those rows in start-to-end order.

			<span class="option grid">Flow-oriented Option</span>
			Represents row-primary item placement,
			i.e. placing items start-to-end in the [=inline axis=],
			producing flex row lines in [=flex layout=],
			and column grid tracks in [=masonry layout=].

		: <dfn>column</dfn>
		::
			<span class="option masonry">Track-oriented Option</span>
			Represents placement into columns,
			i.e. tracks or lines parallel to the [=block axis=].
			Items fill those columns in start-to-end order.

			<span class="option grid">Flow-oriented Option</span>
			Represents column-primary item placement,
			i.e. placing items start-to-end in the [=block axis=],
			producing flex column lines in [=flex layout=],
			and row grid tracks in [=masonry layout=].

		: <dfn>row-reverse</dfn>
		::
			Same as ''item-direction/row'',
			but using end-to-start placement order.

		: <dfn>column-reverse</dfn>
		::
			Same as ''item-direction/column'',
			but using end-to-start placement order.
	</dl>


<h3 id="item-secondary-axis">
Item Cross Axis Placement Mode: 'item-cross'/'item-wrap'</h3>

	<pre class=propdef>
	Name: item-wrap, item-cross
	Value: [ auto | nowrap | wrap ] || [ normal | reverse ] | wrap-reverse
	Initial: auto
	Percentages: N/A
	Inherited: no
	Applies to: [=flex containers=], [=grid containers=], [=masonry containers=]
	Computed value: as specified
	Animation type: discrete
	</pre>

	Controls placement in the axis opposite to the [=primary axis=].

	<dl dfn-type=value dfn-for="item-wrap,item-cross">
		: <dfn>auto</dfn>
		::
			Computes to ''item-wrap/nowrap'' on [=flex containers=],
			and ''item-wrap/wrap'' on everything else.

		: <dfn>nowrap</dfn>
		::
			Items are placed in the [=primary placement axis=] forever,
			even if they run out of room.
			In [=flex layout=] this creates a [=single-line flex container=];
			in [=grid layout=] this creates [=implicit grid track|implicit tracks=] in the [=primary placement axis=] as necessary.

		: <dfn>wrap</dfn>
		::
			Items wrap when the [=primary placement axis=] runs out of space.
			In [=flex layout=] this creates a [=multi-line flex container=];
			in [=grid layout=] auto-placement algorithm moves to the next
			row/column when it runs out of explicit tracks in the [=primary placement axis=].

		: <dfn>normal</dfn>
		::
			Items are placed in start-to-end order
			in the axis opposite to the [=primary track axis=].

			In [=flex layout=] and [=grid layout=],
			this controls the direction that new tracks
			(flex lines or grid tracks)
			are placed in.

			In [=masonry layout=],
			<span class="option masonry">for track-oriented syntax this controls which track is selected
			when several are tied for equal height</span>;
			<span class="option grid">for flow-oriented syntax this controls which direction
			items fill their track in.</span>

		: <dfn>reverse</dfn>
		::
			Items are placed in end-to-start order
			in the axis opposite to the [=primary track axis=].

		: <dfn>wrap-reverse</dfn>
		::
			Computes to ''wrap reverse''.

			Note: This value exists for consistency with the existing 'flex-wrap' value.
	</dl>

	ISSUE(11480): The interpretation and naming of this property depends on
	the interpretation of axes for 'item-direction'/'item-track'.

<h3 id="item-pack-options">
Item Placement Packing Mode: the 'item-pack' property</h3>

	<pre class=propdef>
	Name: item-pack
	Value: normal | dense || balance
	Initial: normal
	Percentages: N/A
	Inherited: no
	Applies to: [=flex containers=], [=grid containers=], [=masonry containers=]
	Computed value: as specified
	Animation type: discrete
	</pre>

	This property controls how items are distributed among the tracks
	in a layout-specific way.

	<dl dfn-type=value dfn-for=item-pack>
		: <dfn>normal</dfn>
		::
			Uses the default packing strategy for the layout mode.

		: <dfn>dense</dfn>
		::
			Allows backtracking to place items in earlier spaces that were skipped.
			(Such spaces can exist because earlier items were too big for those spaces.)

			For example,
			in [=flex layout=] this allows placing items on earlier lines
			that still have enough empty space left over.

		: <dfn>balance</dfn>
		::
			In [=flex layout=],
			this value balances the amount of content on each line
			(including the last line),
			similar to ''text-wrap-style: balance''.
	</dl>

	ISSUE(11243): One of the proposals for switching into [=masonry layout=]
	is to add a <dfn value for=item-pack>collapse</dfn> value
	to this 'item-pack' property.

	ISSUE(9326):
	Should <css>dense</css> packing apply to masonry?
	It's much more expensive in masonry,
	as you have to lay out the element in every possible gap spot
	to see if it's short enough to fit;
	Grid gets to just juggle some integers.

<h3 id="item-flow">
Item Placement Shorthand: the 'item-flow' shorthand</h3>

	<pre class="propdef shorthand">
	Name: item-flow
	Value: <<'item-direction'>> || <<'item-wrap'>> || <<'item-pack'>> || <<'item-tolerance'>>
	</pre>

	This [=shorthand property=] sets all its 'item-*' [=longhand properties=]
	in a single declaration.

<h2 id="acknowledgements">
Acknowledgements</h2>

	Thanks goes to Cameron McCormack who wrote a masonry layout explainer document
	(from which was lifted the Background chapter) and presented it to the CSSWG,
	and to Mats Palmgren who developed the original version of this specification.
	Thanks also to everyone who provided feedback on the <a href="https://github.com/w3c/csswg-drafts/issues/4650">initial proposal</a> for this feature.

<h2 id=security>
Security Considerations</h2>

	As a layout specification,
	this spec introduces no new security considerations
	beyond that exposed by CSS layout in general.

<h2 id=privacy>
Privacy Considerations</h2>

	As a layout specification,
	this spec introduces no new privacy considerations
	beyond that exposed by CSS layout in general.

<h2 class="no-num" id="changes">
Changes</h2>


<h3 id="changes-3">
Additions Since Level 2</h3>

	The following features have been added since
	<a href="http://www.w3.org/TR/css-grid-2/">Level 2</a>:

	<ul>
		<li>Added [=masonry layout=].
		<li>Added the 'item-flow' property and its longhands,
			as generic controls for item ordering and placement.
			See [[#flow-control]].
			(<a href="https://github.com/w3c/csswg-drafts/issues/11480">Issue 11480</a>)
	</ul>

<h3 class="no-num" id="recent-changes">
Recent Changes</h3>

	The following changes have been made since the
	<a href='https://www.w3.org/TR/2024/WD-css-grid-3-20241003/'>3 October 2024 Working Draft</a>:

	* Dropped the masonry-specific track template and placement properties.
		(<a href="https://github.com/w3c/csswg-drafts/issues/11243">Issue 11243</a>)
	* Introduced 'item-flow' and the 'item-*' longhands,
		replacing <css>masonry-flow</css> and related properties.
		(<a href="https://github.com/w3c/csswg-drafts/issues/11480">Issue 11480</a>)
	* Renamed <css>masonry-slack</css> to <css>item-slack</css>

	The following changes have been made since the
	<a href='https://www.w3.org/TR/2025/WD-css-grid-3-20250207/
'>7 February 2025 Working Draft</a>:

	* Renamed <css>item-slack</css> to 'item-tolerance'
		and gave it an initial value of ''item-tolerance/normal''.
		(<a href="https://github.com/w3c/csswg-drafts/issues/10884">Issue 10884</a>,
		 <a href="https://github.com/w3c/csswg-drafts/issues/12111">Issue 12111</a>)
	* Added a placeholder for a [=masonry layout=] 'display' value.
		(<a href="https://github.com/w3c/csswg-drafts/issues/12022">Issue 12022</a>)
	* Defined [[#masonry-dense-packing|dense packing]] for [=masonry layout=].
		(<a href="https://github.com/w3c/csswg-drafts/issues/9326">Issue 9326</a>)
	* Tweaked baseline alignment to export the highest/lowest among the first/last items of every track.
		(<a href="https://github.com/w3c/csswg-drafts/issues/9530">Issue 9530</a>)

<wpt hidden>
abspos/column-masonry-alignment.html
abspos/column-masonry-intrinsic-sizing-oof.html
abspos/column-masonry-out-of-flow-001.html
abspos/column-masonry-out-of-flow-002.html
abspos/column-masonry-out-of-flow-003.html
abspos/column-masonry-positioned-item-dynamic-change.html
abspos/row-masonry-alignment.html
abspos/row-masonry-intrinsic-sizing-oof.html
abspos/row-masonry-out-of-flow-001.html
abspos/row-masonry-out-of-flow-002.html
abspos/row-masonry-out-of-flow-003.html
abspos/row-masonry-positioned-item-dynamic-change.html
alignment/column-justify-items-center-001.html
alignment/column-justify-items-end-justify-self-start-001.html
alignment/column-masonry-alignment-positioned-items-001.html
alignment/column-masonry-alignment-positioned-items-002.html
alignment/column-masonry-alignment-positioned-items-003.html
alignment/column-masonry-alignment-positioned-items-004.html
alignment/column-masonry-justify-self-001.html
alignment/column-masonry-justify-self-002.html
alignment/column-masonry-justify-self-003.html
alignment/column-overflow-alignment-001.html
alignment/masonry-align-content-001.html
alignment/masonry-align-content-002.html
alignment/masonry-align-content-003.html
alignment/masonry-align-content-004.html
alignment/masonry-justify-content-001.html
alignment/masonry-justify-content-002.html
alignment/masonry-justify-content-003.html
alignment/masonry-justify-content-004.html
alignment/row-align-items-center-001.html
alignment/row-align-items-end-align-self-start-001.html
alignment/row-masonry-align-self-001.html
alignment/row-masonry-align-self-002.html
alignment/row-masonry-align-self-003.html
alignment/row-masonry-alignment-positioned-items-001.html
alignment/row-masonry-alignment-positioned-items-002.html
alignment/row-masonry-alignment-positioned-items-003.html
alignment/row-masonry-alignment-positioned-items-004.html
alignment/row-overflow-alignment-001.html
baseline/masonry-grid-item-content-baseline-001.html
baseline/masonry-grid-item-self-baseline-001.html
baseline/masonry-grid-item-self-baseline-002a.html
baseline/masonry-grid-item-self-baseline-002b.html
column-empty-masonry-container-001.html
column-empty-masonry-container-002.html
fragmentation/masonry-fragmentation-001.html
fragmentation/masonry-fragmentation-002.html
fragmentation/masonry-fragmentation-003.html
gap/column-gaps-001.html
gap/masonry-gap-001.html
gap/masonry-gap-002.html
gap/row-gaps-001.html
grid-placement/column-explicit-placement-001.html
grid-placement/column-explicit-placement-002.html
grid-placement/column-explicit-placement-003.html
grid-placement/masonry-grid-placement-named-lines-001.html
grid-placement/masonry-grid-placement-named-lines-002.html
grid-placement/row-explicit-placement-001.html
grid-placement/row-explicit-placement-002.html
grid-placement/row-explicit-placement-003.html
grid-placement/row-explicit-placement-004.html
grid-placement/row-explicit-placement-005.html
grid-placement/row-explicit-placement-006.html
grid-placement/row-explicit-placement-007.html
grid-placement/row-explicit-placement-008.html
intrinsic-sizing/column-intrinsic-inline-container-size.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-001-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-001-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-001-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-002-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-002-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-002-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-003-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-003-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-003-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-004-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-004-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-004-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-005.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-006.html
intrinsic-sizing/masonry-intrinsic-sizing-cols-007.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-001-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-001-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-001-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-002-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-002-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-002-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-003-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-003-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-003-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-004-auto.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-004-fr.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix1.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-004-mix2.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-005.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-006.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-007-ref.html
intrinsic-sizing/masonry-intrinsic-sizing-rows-007.html
intrinsic-sizing/row-defined-height.html
intrinsic-sizing/row-intrinsic-inline-container-size.html
item-placement/column-auto-placement-001.html
item-placement/column-negative-margin-001.html
item-placement/column-reverse-001.html
item-placement/column-reverse-002.html
item-placement/column-reverse-003.html
item-placement/dense-packing/column-dense-packing-001.html
item-placement/dense-packing/column-dense-packing-002.html
item-placement/dense-packing/column-dense-packing-003.html
item-placement/dense-packing/column-dense-packing-004.html
item-placement/dense-packing/column-dense-packing-005.html
item-placement/dense-packing/column-dense-packing-006.html
item-placement/dense-packing/column-dense-packing-multi-span-001.html
item-placement/dense-packing/column-dense-packing-multi-span-002.html
item-placement/dense-packing/column-dense-packing-multi-span-003.html
item-placement/dense-packing/column-dense-packing-multi-span-004.html
item-placement/dense-packing/column-dense-packing-multi-span-006.html
item-placement/dense-packing/column-dense-packing-multi-span-007.html
item-placement/dense-packing/column-dense-packing-multi-span-008.html
item-placement/dense-packing/column-dense-packing-multi-span-009.html
item-placement/dense-packing/row-dense-packing-001.html
item-placement/dense-packing/row-dense-packing-002.html
item-placement/dense-packing/row-dense-packing-003.html
item-placement/dense-packing/row-dense-packing-004.html
item-placement/dense-packing/row-dense-packing-multi-span-001.html
item-placement/dense-packing/row-dense-packing-multi-span-002.html
item-placement/dense-packing/row-dense-packing-multi-span-003.html
item-placement/dense-packing/row-dense-packing-multi-span-004.html
item-placement/dense-packing/row-dense-packing-multi-span-005.html
item-placement/item-tolerance/column-initial-item-tolerance.html
item-placement/item-tolerance/column-item-tolerance-infinite.html
item-placement/item-tolerance/row-initial-item-tolerance.html
item-placement/item-tolerance/row-item-tolerance-infinite.html
item-placement/masonry-item-placement-001.html
item-placement/masonry-item-placement-002.html
item-placement/masonry-item-placement-003.html
item-placement/masonry-item-placement-004.html
item-placement/masonry-item-placement-005.html
item-placement/masonry-item-placement-006.html
item-placement/masonry-item-placement-007.html
item-placement/masonry-item-placement-008.html
item-placement/masonry-rows-with-grid-width-changed.html
item-placement/row-auto-placement-001.html
item-placement/row-auto-placement-002.html
item-placement/row-auto-placement-max-content.html
item-placement/row-auto-placement-min-content.html
item-placement/row-negative-margin-001.html
item-placement/row-reverse-001.html
item-placement/row-reverse-002.html
item-placement/row-reverse-003.html
items/column-automatic-minimum-for-auto.html
items/column-fit-content-percentage.html
items/column-flex-and-intrinsic-sizes.html
items/column-flex-spanning-items.html
items/column-flex-track-intrinsic-sizes.html
items/column-intrinsic-maximums.html
items/column-intrinsic-track-sizes-min-size.html
items/column-intrinsic-track-sizes.html
items/column-item-minmax-img-001.html
items/column-item-minmax-img-002.html
items/column-item-percentage-sizes-001.html
items/column-item-percentage-sizes-002.html
items/column-item-percentage-sizes-003.html
items/column-minimum-contribution-baseline-shim-vertical-lr.html
items/column-minimum-contribution-baseline-shim-vertical-rl.html
items/column-minimum-contribution-with-percentages.html
items/column-minimum-size-grid-items-001.html
items/column-minimum-size-grid-items-002.html
items/column-minimum-size-grid-items-003.html
items/row-automatic-minimum-for-auto.html
items/row-flex-and-intrinsic-sizes.html
items/row-flex-spanning-items.html
items/row-flex-track-intrinsic-sizes.html
items/row-intrinsic-track-sizes.html
items/row-item-minmax-img-001.html
items/row-item-minmax-img-002.html
items/row-item-percentage-sizes-001.html
items/row-item-percentage-sizes-002.html
items/row-item-percentage-sizes-003.html
items/row-minimum-contribution-baseline-shim.html
items/row-minimum-contribution-with-percentages.html
items/row-minimum-size-grid-items-001.html
items/row-minimum-size-grid-items-002.html
items/row-minimum-size-grid-items-003.html
masonry-columns-item-containing-block-is-grid-content-width.html
masonry-fieldset-crash.html
masonry-grid-template-columns-computed-withcontent.html
masonry-not-inhibited-001.html
order/column-order-property-auto-placement-001.html
order/column-order-property-auto-placement-002.html
order/column-order-property-auto-placement-003.html
order/column-order-property-auto-placement-004.html
order/column-order-property-auto-placement-005.html
order/masonry-order-001.html
order/row-order-property-auto-placement-001.html
order/row-order-property-auto-placement-002.html
order/row-order-property-auto-placement-003.html
order/row-order-property-auto-placement-004.html
order/row-order-property-auto-placement-005.html
row-empty-masonry-container-001.html
row-empty-masonry-container-002.html
row-min-max-content-container.html
subgrid/masonry-subgrid-001.html
subgrid/masonry-subgrid-002.html
subgrid/track-sizing/masonry-subgrid-flex.html
subgrid/track-sizing/masonry-subgrid-intrinsic-sizing.html
subgrid/track-sizing/masonry-subgrid.html
track-sizing/auto-repeat/auto-repeat-no-children-crash.html
track-sizing/auto-repeat/column-auto-repeat-001.html
track-sizing/auto-repeat/column-auto-repeat-002.html
track-sizing/auto-repeat/column-auto-repeat-003.html
track-sizing/auto-repeat/column-auto-repeat-004.html
track-sizing/auto-repeat/column-auto-repeat-005.html
track-sizing/auto-repeat/column-auto-repeat-006.html
track-sizing/auto-repeat/column-auto-repeat-007.html
track-sizing/auto-repeat/column-auto-repeat-008.html
track-sizing/auto-repeat/column-auto-repeat-009.html
track-sizing/auto-repeat/column-auto-repeat-010.html
track-sizing/auto-repeat/column-auto-repeat-011.html
track-sizing/auto-repeat/column-auto-repeat-012.html
track-sizing/auto-repeat/column-auto-repeat-013.html
track-sizing/auto-repeat/column-auto-repeat-014.html
track-sizing/auto-repeat/column-auto-repeat-015.html
track-sizing/auto-repeat/column-auto-repeat-016.html
track-sizing/auto-repeat/column-auto-repeat-017.html
track-sizing/auto-repeat/column-auto-repeat-018.html
track-sizing/auto-repeat/column-auto-repeat-019.html
track-sizing/auto-repeat/column-auto-repeat-020.html
track-sizing/auto-repeat/column-auto-repeat-021.html
track-sizing/auto-repeat/column-auto-repeat-022.html
track-sizing/auto-repeat/column-auto-repeat-023.html
track-sizing/auto-repeat/column-auto-repeat-024.html
track-sizing/auto-repeat/column-auto-repeat-025.html
track-sizing/auto-repeat/column-auto-repeat-026.html
track-sizing/auto-repeat/column-auto-repeat-027.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-006.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-007.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-008.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-009.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-010.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-011.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-012.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-013.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-014.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-015.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-016.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-017.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-018.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-019.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-020.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-021.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-022.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-023.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-024.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-025.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-026.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-027.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-028.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-029.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-auto-no-items-crash.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-fit-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-max-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-min-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/column-auto-repeat-mixed-intrinsic-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/repeat-auto-fit-auto-crash.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-006.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-007.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-008.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-009.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-010.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-011.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-012.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-013.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-014.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-015.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-016.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-017.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-018.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-019.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-020.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-021.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-022.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-023.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-024.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-025.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-026.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-027.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-028.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-auto-no-items-crash.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-fit-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-max-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-002.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-003.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-004.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-min-content-005.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-001.html
track-sizing/auto-repeat/intrinsic-auto-repeat/row-auto-repeat-mixed-intrinsic-002.html
track-sizing/auto-repeat/row-auto-repeat-001.html
track-sizing/auto-repeat/row-auto-repeat-002.html
track-sizing/auto-repeat/row-auto-repeat-003.html
track-sizing/auto-repeat/row-auto-repeat-004.html
track-sizing/auto-repeat/row-auto-repeat-005.html
track-sizing/auto-repeat/row-auto-repeat-006.html
track-sizing/auto-repeat/row-auto-repeat-007.html
track-sizing/auto-repeat/row-auto-repeat-008.html
track-sizing/auto-repeat/row-auto-repeat-009.html
track-sizing/auto-repeat/row-auto-repeat-010.html
track-sizing/auto-repeat/row-auto-repeat-011.html
track-sizing/auto-repeat/row-auto-repeat-012.html
track-sizing/auto-repeat/row-auto-repeat-013.html
track-sizing/auto-repeat/row-auto-repeat-014.html
track-sizing/auto-repeat/row-auto-repeat-015.html
track-sizing/auto-repeat/row-auto-repeat-016.html
track-sizing/auto-repeat/row-auto-repeat-017.html
track-sizing/auto-repeat/row-auto-repeat-018.html
track-sizing/auto-repeat/row-auto-repeat-019.html
track-sizing/auto-repeat/row-auto-repeat-020.html
track-sizing/auto-repeat/row-auto-repeat-021.html
track-sizing/auto-repeat/row-auto-repeat-022.html
track-sizing/auto-repeat/row-auto-repeat-023.html
track-sizing/auto-repeat/row-auto-repeat-024.html
track-sizing/auto-repeat/row-auto-repeat-025.html
track-sizing/column-track-sizing-001.html
track-sizing/column-track-sizing-002.html
track-sizing/column-track-sizing-003.html
track-sizing/column-track-sizing-004.html
track-sizing/column-track-sizing-005.html
track-sizing/dynamic-grid-track-direction.html
track-sizing/masonry-track-sizing-check-grid-height-on-resize.html
track-sizing/masonry-track-sizing-explicit-block.html
track-sizing/masonry-track-sizing-overflow-left-side.html
track-sizing/masonry-track-sizing-overflow-right-side.html
track-sizing/masonry-track-sizing-span-row.html
track-sizing/row-track-sizing-001.html
track-sizing/row-track-sizing-002.html
track-sizing/row-track-sizing-003.html
track-sizing/row-track-sizing-004.html
track-sizing/row-track-sizing-005.html
</wpt>