[css-values-5] Moved definition of <fraction> from CSS Values 4 to 5 and reverted changes to CSS Grid 1 and 2

Author: SebastianZ

css-grid-1/Overview.bs

@@ -1496,7 +1496,7 @@ Explicit Track Sizing: the 'grid-template-rows' and 'grid-template-columns' prop
 
 		<dfn>&lt;track-size></dfn>          = <<track-breadth>> | minmax( <<inflexible-breadth>> , <<track-breadth>> ) | fit-content( <<length-percentage [0,∞]>> )
 		<dfn>&lt;fixed-size></dfn>          = <<fixed-breadth>> | minmax( <<fixed-breadth>> , <<track-breadth>> ) | minmax( <<inflexible-breadth>> , <<fixed-breadth>> )
-		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<fraction>> | min-content | max-content | auto
+		<dfn>&lt;track-breadth></dfn>       = <<length-percentage [0,∞]>> | <<flex [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;inflexible-breadth></dfn>  = <<length-percentage [0,∞]>> | min-content | max-content | auto
 		<dfn>&lt;fixed-breadth></dfn>       = <<length-percentage [0,∞]>>
 		<dfn>&lt;line-names></dfn>          = '[' <<custom-ident>>* ']'
@@ -1525,20 +1525,20 @@ Track Sizes</h4>
 			and then resolve against that resulting <a>grid container</a> size
 			for the purpose of laying out the <a>grid</a> and its items.
 
-		<dt><dfn><<fraction>></dfn>
+		<dt><dfn><<flex [0,∞]>></dfn>
 		<dd>
-			Specifies the track's <dfn dfn noexport>flex factor</dfn>.
-			Each <<fraction>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
+			A non-negative dimension with the unit ''fr'' specifying the track's <dfn dfn noexport>flex factor</dfn>.
+			Each <<flex>>-sized track takes a share of the remaining space in proportion to its <a>flex factor</a>.
 			For example, given a track listing of ''1fr 2fr'',
 			the tracks will take up ⅓ and ⅔ of the <a>leftover space</a>, respectively.
-			See [[#flexible-tracks]] for more details.
+			See [[#fr-unit]] for more details.
 
 			Note: If the sum of the <a>flex factors</a> is less than 1,
 			they'll take up only a corresponding fraction of the <a>leftover space</a>,
 			rather than expanding to fill the entire thing.
 
 			When appearing outside a ''minmax()'' notation,
-			implies an automatic minimum (i.e. ''minmax(auto, <<fraction>>)'').
+			implies an automatic minimum (i.e. ''minmax(auto, <<flex>>)'').
 
 		<dt><dfn function lt="minmax()">minmax(<var>min</var>, <var>max</var>)</dfn>
 		<dd>
@@ -1548,10 +1548,10 @@ Track Sizes</h4>
 			If the <var>max</var> is less than the <var>min</var>,
 			then the <var>max</var> will be floored by the <var>min</var>
 			(essentially yielding ''minmax(<var>min</var>, <var>min</var>)'').
-			As a maximum, a <<fraction>> value sets the track's <a>flex factor</a>;
+			As a maximum, a <<flex>> value sets the track's <a>flex factor</a>;
 			it is invalid as a minimum.
 
-			Note: A future level of this spec may allow <<fraction>> minimums,
+			Note: A future level of this spec may allow <<flex>> minimums,
 			and will update the <a>track sizing algorithm</a> to account for this correctly
 
 		<dt><dfn>auto</dfn>
@@ -1633,7 +1633,7 @@ Track Sizes</h4>
 		(the ''1fr'' sizes both resolve to ''0'').
 		If the sum is less than the <a>grid container</a>’s width,
 		the final <a>grid line</a> will be exactly at the end edge of the <a>grid container</a>.
-		This is true in general whenever there's at least one <<fraction>> value among the <a>grid track</a> sizes.
+		This is true in general whenever there's at least one <<flex>> value among the <a>grid track</a> sizes.
 	</div>
 
 	<div class='example'>
@@ -1835,30 +1835,70 @@ Interpolation/Combination of ''repeat()''</h5>
 	They otherwise combine <a lt=discrete>discretely</a>.
 
 <!--
-████████ ██       ████████ ██     ██ ████ ████████  ██       ████████
-██       ██       ██        ██   ██   ██  ██     ██ ██       ██
-██       ██       ██         ██ ██    ██  ██     ██ ██       ██
-██████   ██       ██████      ███     ██  ████████  ██       ██████
-██       ██       ██         ██ ██    ██  ██     ██ ██       ██
-██       ██       ██        ██   ██   ██  ██     ██ ██       ██
-██       ████████ ████████ ██     ██ ████ ████████  ████████ ████████
+████████ ████████        ██     ██ ██    ██ ████ ████████
+██       ██     ██       ██     ██ ███   ██  ██     ██
+██       ██     ██       ██     ██ ████  ██  ██     ██
+██████   ████████        ██     ██ ██ ██ ██  ██     ██
+██       ██   ██         ██     ██ ██  ████  ██     ██
+██       ██    ██        ██     ██ ██   ███  ██     ██
+██       ██     ██        ███████  ██    ██ ████    ██
 -->
 
-<h4 id='flexible-tracks'>
-Flexible Tracks</h4>
+<h4 id='fr-unit'>
+Flexible Lengths: the ''fr'' unit</h4>
 
-	Tracks sized using a <<fraction>> of the <a>leftover space</a>
-	are called <dfn>flexible tracks</dfn>
+	A <dfn export>flexible length</dfn> or <dfn><<flex>></dfn> is a dimension
+	with the <dfn value for="<flex>" lt="fr|fr unit">fr</dfn> unit,
+	which represents a fraction of the <a>leftover space</a> in the <a>grid container</a>.
+	Tracks sized with ''fr'' units are called <dfn>flexible tracks</dfn>
 	as they flex in response to <a>leftover space</a>
-	similar to how <a>flex items</a> with a zero base size
-	fill space in a <a>flex container</a>.
+	similar to how <a>flex items</a> with a zero base size fill space in a <a>flex container</a>.
 
 	The distribution of <a>leftover space</a> occurs after all non-flexible <a>track sizing functions</a> have reached their maximum.
 	The total size of such rows or columns is subtracted from the available space, yielding the <a>leftover space</a>,
 	which is then divided among the flex-sized rows and columns in proportion to their <a>flex factor</a>.
 
 	Each column or row's share of the <a>leftover space</a> can be computed as the column or row's
-	<code>&lt;fraction> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
+	<code>&lt;flex> * &lt;leftover space> / &lt;sum of all <a>flex factors</a>&gt;</code>.
+
+	<details class=note>
+		<summary><<flex>> values between 0fr and 1fr have a somewhat special behavior:
+		when the sum of the flex factors is less than 1,
+		they will take up less than 100% of the leftover space.</summary>
+
+		A track’s <<flex>> value
+		is effectively a request for some proportion of the leftover space,
+		with ''1fr'' meaning “100% of the leftover space”;
+		then if the tracks in that axis are requesting more than 100% in total,
+		the requests are rebalanced to keep the same ratio but use up exactly 100% of it.
+		However, if the tracks request <em>less</em> than the full amount
+		(such as three tracks that are each ''.25fr'')
+		then they'll each get exactly what they request
+		(25% of the leftover space to each,
+		with the final 25% left unfilled).
+		See [[#algo-flex-tracks]] for the exact details
+		of how leftover space is distributed.
+
+		This pattern is required for continuous behavior as ''fr'' values approach zero
+		(which means the tracks wants <em>none</em> of the leftover space).
+		Without this, a ''1fr'' track would take all of the leftover space;
+		but so would a ''0.1fr'' track,
+		and a ''0.01fr'' track,
+		etc.,
+		until finally the value is small enough to underflow to zero
+		and the track suddenly takes up none of the leftover space.
+		With this behavior,
+		the track instead gradually takes less of the leftover space
+		as its flex factor shrinks below ''1fr'',
+		smoothly transitioning to taking none of the leftover space at zero.
+
+		Unless this “partial fill” behavior is <em>specifically</em> what's desired,
+		authors should stick to values &ge; 1;
+		for example, using ''1fr'' and ''2fr'' is usually better
+		than using ''.33fr'' and ''.67fr'',
+		as they're more likely to behave as intended
+		if tracks are added or removed.
+	</details>
 
 	When the available space is infinite
 	(which happens when the <a>grid container</a>’s width or height is <a>indefinite</a>),
@@ -1870,6 +1910,10 @@ Flexible Tracks</h4>
 	The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
 	which is then multiplied by each <a>grid track</a>’s <a>flex factor</a> to determine its final size.
 
+	Note: <<flex>> values are not <<length>>s
+	(nor are they compatible with <<length>>s, like some <<percentage>> values),
+	so they cannot be represented in or combined with other unit types in ''calc()'' expressions.
+
 <!--
  ██████   ███████  ██     ██ ████████  ██     ██ ████████ ████████ ████████
 ██    ██ ██     ██ ███   ███ ██     ██ ██     ██    ██    ██       ██     ██
@@ -3563,7 +3607,7 @@ Inline-axis Alignment: the 'justify-self' and 'justify-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
+	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 	Note: Whether the fallback alignment is used or not
@@ -3586,7 +3630,7 @@ Block-axis Alignment: the 'align-self' and 'align-items' properties</h3>
 	that item does not participate in baseline alignment,
 	and instead uses its <a>fallback alignment</a>
 	as if that were originally specified.
-	For this purpose, <<fraction>> track sizes count as “intrinsically-sized”
+	For this purpose, <<flex>> track sizes count as “intrinsically-sized”
 	when the [=grid container=] has an [=indefinite=] size in the relevant axis.
 
 <h3 id='grid-align'>
@@ -3782,7 +3826,7 @@ Grid Sizing Algorithm</h3>
 	<ul>
 		<li>A <dfn>fixed sizing function</dfn> (<<length>> or resolvable <<percentage>>).
 		<li>An <dfn>intrinsic sizing function</dfn> (''min-content'', ''max-content'', ''grid-template-rows/auto'', ''fit-content()'').
-		<li>A <dfn>flexible sizing function</dfn> (<<fraction>>).
+		<li>A <dfn>flexible sizing function</dfn> (<<flex>>).
 	</ul>
 
 	The <a>grid sizing algorithm</a> defines how to resolve these sizing constraints into used track sizes.
@@ -3823,7 +3867,7 @@ Grid Sizing Algorithm</h3>
 				<li>
 					infinity, if any track that it spans
 					has a ''max-content'' min sizing function
-					or a ''max-content'', ''auto'', or <<fraction>> max sizing function.
+					or a ''max-content'', ''auto'', or <<flex>> max sizing function.
 			</ul>
 
 			This is may reduce the amount of re-layout passes that are necessary,
@@ -3896,7 +3940,7 @@ Track Sizing Terminology</h3>
 		<dd>
 			If the track was sized with a ''minmax()'' function,
 			this is the first argument to that function.
-			If the track was sized with a <<fraction>> value or ''fit-content()'' function,
+			If the track was sized with a <<flex>> value or ''fit-content()'' function,
 			''auto''.
 			Otherwise, the track's sizing function.
 
@@ -4873,10 +4917,6 @@ Changes since the <a href="https://www.w3.org/TR/2020/CRD-css-grid-1-20201218/">
 			and grid track sizing.
 			See [[#layout-algorithm]].
 			(<a href="https://github.com/w3c/csswg-drafts/issues/3418">Issue 3418</a>)
-		<li id="change-2020-fr-unit">
-			Renamed <<flex>> to <<fraction>> and moved its definition to [[css-values-4#fractions]],
-			as other specs also make use of it.
-			(<a href="https://github.com/w3c/csswg-drafts/issues/8027">Issue 8027</a>)
 	</ul>
 
 <h3 id="changes-202008">
@@ -5570,7 +5610,7 @@ Major Changes</h4>
 			when <<percentage>> sizes are used
 			in <a lt="fit-content size">fit-content</a>-sized <a>grid containers</a>
 			such as ''width/auto''-sized inline or floated <a>grid containers</a>.
-			(To avoid this problem, use <<fraction>> units instead,
+			(To avoid this problem, use <<flex>> units instead,
 			which are intended to maintain their ratios and not overflow
 			when the grid is intrinsically-sized.)
 			<blockquote>