[css-grid-3] Dropped the item-* proposal. #11480

Author: tabatkins

css-grid-3/Overview.bs

@@ -848,11 +848,11 @@ Placement Precision: the 'flow-tolerance' property</h3>
 	on how that might work.
 
 <h3 id="grid-lanes-dense-packing">
-Dense Placement: the ''item-pack/dense'' keyword</h3>
+Dense Placement: the ''grid-auto-flow/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
+	The ''grid-auto-flow/dense'' keyword similarly allows backtracking
 	during the [[#grid-lanes-layout-algorithm|grid lanes placement algorithm]].
 	However, because item placement and sizing are intertwined in [=grid lanes layout=],
 	an item can only backtrack into a compatible empty slot if
@@ -915,7 +915,7 @@ Grid Lanes Layout and Placement Algorithm</h3>
 			to overlap previous items.
 
 		<li>
-			If the [=grid lanes container=] uses ''item-pack/dense'' packing,
+			If the [=grid lanes container=] uses ''grid-auto-flow/dense'' packing,
 			and there exists skipped spaces in the layout
 			(e.g. due to spanning items)
 			into which the item, as it is sized now,
@@ -937,7 +937,7 @@ Grid Lanes Layout and Placement Algorithm</h3>
 			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.
+			it places items exactly as when ''grid-auto-flow/dense'' were not specified.
 	</ol>
 
 	Note: This algorithm chooses the track
@@ -1271,279 +1271,6 @@ Graceful Degradation</h2>
 		</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.
-	It is also still under discussion as to whether this is a good idea.
-
-	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>'flow-tolerance'
-			<td>'flow-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=], [=grid lanes 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 [=grid lanes layout=] whose primary placement direction
-	is across its tracks.
-	See <a href="https://github.com/w3c/csswg-drafts/issues/12803">latest discussion</a>.
-
-	<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 [=grid lanes 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 [=grid lanes 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 [=grid lanes 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=], [=grid lanes 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 [=grid lanes 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=], [=grid lanes 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>
-
-<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'>> || <<'flow-tolerance'>>
-	</pre>
-
-	This [=shorthand property=] sets all its 'item-*' [=longhand properties=]
-	in a single declaration.
 
 <h2 id="acknowledgements">
 Acknowledgements</h2>
@@ -1586,15 +1313,16 @@ Additions Since Level 2</h3>
 			(<a href="https://github.com/w3c/csswg-drafts/issues/9321">Issue 9321</a>,
 			 <a href="https://github.com/w3c/csswg-drafts/issues/12899">Issue 12899</a>)
 		<li>Introduced the 'flow-tolerance' property.
-		<li>Introduced the 'item-flow' property and its longhands,
-			as generic controls for item ordering and placement.
-			See [[#flow-control]]. Note: This is still under discussion.
-			(<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 amde since the
+	<a href="https://www.w3.org/TR/2026/WD-css-grid-3-20260121/">21 January 2026 Working Draft</a>:
+	* Dropped the 'item-*' proposal for unified flow controls across layout modes.
+		(<a href="https://github.com/w3c/csswg-drafts/issues/11480">Issue 11480</a>)
+
 	The following changes have been made since the
 	<a href="https://www.w3.org/TR/2025/WD-css-grid-3-20251223/">23 December 2025 Working Draft</a>:
 	* Renamed <css>item-tolerance</css> to 'flow-tolerance'.