Mercurial > drafts / changeset

     1.1 --- a/css-grid/Overview.bs	Thu Feb 27 18:13:01 2014 -0800
     1.2 +++ b/css-grid/Overview.bs	Thu Feb 27 18:22:15 2014 -0800
     1.3 @@ -16,7 +16,7 @@
     1.4  Former editor: <a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft Corporation
     1.5  !Issues list: <a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a>
     1.6  Abstract: This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a flexible or fixed predefined layout grid.
     1.7 -Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end
     1.8 +Ignored Terms: containing block, <positive-integer>, <ident>, auto, grid-*-start, grid-*-end, flex factor, flex factors
     1.9  Link Defaults: css21 (property) margin, css-align-3 (dfn) alignment container/alignment subject
    1.10  At Risk: the ''grid-template-rows/subgrid'' value of 'grid-template-columns' and 'grid-template-rows', and its component parts individually
    1.11  </pre>
    1.12 @@ -780,7 +780,7 @@
    1.13  
    1.14  		<dt><dfn><<flex>></dfn>
    1.15  		<dd>
    1.16 -			A non-negative dimension with the unit "fr".
    1.17 +			A non-negative dimension with the unit ''fr'' specifying the track's <dfn noexport>flex factor</dfn>.
    1.18  			Each <<flex>> value takes a share of the remaining space in proportion to its value.
    1.19  			See <a href="#fr-unit">Flexible Lengths</a> for more details.
    1.20  
    1.21 @@ -960,14 +960,14 @@
    1.22  	<p>
    1.23  		The distribution of <a>free space</a> occurs after all non-flexible <a>sizing functions</a> have reached their maximum.
    1.24  		The total size of such rows or columns is subtracted from the available space, yielding the <dfn export>free space</dfn>,
    1.25 -		which is then divided among the flex-sized rows and columns in proportion to their flex factor.
    1.26 +		which is then divided among the flex-sized rows and columns in proportion to their <i>flex factor</i>.
    1.27  
    1.28  	<p class='note'>
    1.29  		Flexible lengths in a <a>track list</a> work similarly to flexible lengths with a zero base size in [[CSS3-FLEXBOX]].
    1.30  
    1.31  	<p>
    1.32  		Each column or row's share of the <a>free space</a> can be computed as the column or row's
    1.33 -		<code>&lt;flex> * &lt;free space> / &lt;sum of all flex factors></code>.
    1.34 +		<code>&lt;flex> * &lt;free space> / &lt;sum of all <i>flex factors</i></code>.
    1.35  		For the purpose of this calculation,
    1.36  		a flexible length in the <var>min</var> position of a ''minmax()'' function is treated as ''0'' (an inflexible length).
    1.37  
    1.38 @@ -977,10 +977,10 @@
    1.39  		flex-sized <a>grid tracks</a> are sized to their contents while retaining their respective proportions.
    1.40  		The used size of each flex-sized <a>grid track</a> is computed by
    1.41  		determining the ''max-content'' size of each flex-sized <a>grid track</a>
    1.42 -		and dividing that size by the respective flex factor
    1.43 -		to determine a <dfn export>hypothetical 1fr size</dfn>.
    1.44 -		The maximum of those is used as the ''1fr'' length,
    1.45 -		which is then multiplied by each <a>grid track</a>’s flex factor to determine its final size.
    1.46 +		and dividing that size by the respective <i>flex factor</i>
    1.47 +		to determine a “hypothetical ''1fr'' size”.
    1.48 +		The maximum of those is used as the resolved ''1fr'' length (the <dfn>flex fraction</dfn>),
    1.49 +		which is then multiplied by each <a>grid track</a>’s <i>flex factor</i> to determine its final size.
    1.50  
    1.51  
    1.52  <h4 id="subgrids">
    1.53 @@ -3063,6 +3063,179 @@
    1.54  	<p class='issue'>
    1.55  		This section'll need updating after the algorithm is rewritten.
    1.56  
    1.57 +<h2 id='layout-algorithm-fantasai'>
    1.58 +Rewritten Grid Layout Algorithm</h2>
    1.59 +
    1.60 +	<p class='issue'>
    1.61 +		This should be functionally identical to the Microsoft algorithm.
    1.62 +		If not, please let Tab and fantasai know in what cases it's not!
    1.63 +
    1.64 +	Each track has a <dfn title="minimum track size">minimum</dfn> and
    1.65 +	a <dfn title="maximum track size">maximum</dfn> <i>sizing function</i>
    1.66 +	(which may be the same).
    1.67 +	Each <i>sizing function</i> is either:
    1.68 +	<ul>
    1.69 +		<li>A fixed size (<<length>> or resolved <<percentage>>).
    1.70 +		<li>An intrinsic size (''min-content'' or ''max-content'').
    1.71 +		<li>A flexible size (<<flex>>).
    1.72 +	</ul>
    1.73 +
    1.74 +	The grid layout algorithm defines how to resolve these sizing constraints into used track sizes.
    1.75 +	The grid items are then laid out into their respective <i>grid areas</i>.
    1.76 +
    1.77 +	<ol>
    1.78 +		<li>First, the <i>track sizing algorithm</i> is used to resolve the sizes of the grid columns.
    1.79 +		<li>Next, the <i>track sizing algorithm</i> resolves the sizes of the grid rows.
    1.80 +		<li>Then, if the <i>min-size contribution</i> of any grid items have changed
    1.81 +			based on the row sizes calculated in step 2,
    1.82 +			steps 1 and 2 are repeated with the new <i>min-size contribution</i> (once only).
    1.83 +			<p class='issue'>
    1.84 +				What is this solving and is this the right solution?
    1.85 +	</ol>
    1.86 +
    1.87 +	The remainder of this section is the <dfn>track sizing algorithm</dfn>. There are four steps:
    1.88 +	<ol>
    1.89 +		<li><a href="#init-sizes">Initializing Used Sizes</a>
    1.90 +		<li><a href="#resolve-intrinsic">Resolving Intrinsic Track Sizes</a>
    1.91 +		<li><a href="#resolve-minmax">Distributing Free Space to ''minmax()'' Ranges</a>
    1.92 +		<li><a href="#resolve-flex">Distributing Free Space to Flexible Lengths</a>
    1.93 +	</ol>
    1.94 +
    1.95 +<h3 id='init-sizes'>
    1.96 +Initialize Minimum and Maximum Track Sizes</h3>
    1.97 +
    1.98 +	For fixed track sizes,
    1.99 +	use that resolved size.
   1.100 +
   1.101 +	For intrinsic track sizes,
   1.102 +	use an initial <i>minimum track size</i> of zero and an initial <i>maximum track size</i> of infinity.
   1.103 +
   1.104 +    For flexible track sizes,
   1.105 +	use an initial <i>maximum track size</i> of infinity.
   1.106 +
   1.107 +	A flexible <i>minimum track size</i> is treated exactly as a fixed track size of zero;
   1.108 +    except when the <i>grid container</i> is being sized under a <i>min-content constraint</i>,
   1.109 +	in which case it is treated exactly as ''min-content''.
   1.110 +	<span class='issue'>This seems correct, but should be checked because it wasn't in the original algorithm.</span>
   1.111 +
   1.112 +	These initial sizes will be resolved in subsequent steps.
   1.113 +
   1.114 +<h3 id="resolve-intrinsic">
   1.115 +Resolve Intrinsic Track Sizes</h3>
   1.116 +
   1.117 +	The following steps resolve intrinsic track sizes to used lengths.
   1.118 +	First it resolves those sizes based on items that are contained wholly within a single track.
   1.119 +	Then it gradually adds in the space requirements of items that span multiple tracks,
   1.120 +	evenly increasing their sizes insofar as possible.
   1.121 +
   1.122 +	<ol>
   1.123 +		<li>
   1.124 +			For each track with an intrinsic size, consider the items with a span of 1:
   1.125 +			<ul>
   1.126 +				<li>Set any ''min-content'' track size to the maximum of their <i>min-size contributions</i>.
   1.127 +				<li>Set any ''max-content'' track size to the maximum of their <i>max-size contributions</i>.
   1.128 +			</ul>
   1.129 +		<li>
   1.130 +			Next, consider the items with a span of 2
   1.131 +			and that do not span a track with a flexible maximum size:
   1.132 +			<ol>
   1.133 +				<li>
   1.134 +					First increase any ''min-content'' <i>minimum track sizes</i>
   1.135 +					by <a href="#extra-space">distributing extra space</a>
   1.136 +					as needed to any tracks with intrinsic minimum sizes
   1.137 +					to account for these items' <i>min-size contributions</i>.
   1.138 +				<li>
   1.139 +					Next increase any ''max-content'' <i>minimum track sizes</i>
   1.140 +					by <a href="#extra-space">distributing extra space</a>
   1.141 +					as needed to any tracks with max-content minimum sizes
   1.142 +					to account for these items' <i>max-size contributions</i>.
   1.143 +				<li>
   1.144 +					Third increase any ''min-content'' <i>maximum track sizes</i>
   1.145 +					by <a href="#extra-space">distributing extra space</a>
   1.146 +					as needed to any tracks with intrinsic maximum sizes
   1.147 +					to account for these items' <i>min-size contributions</i>.
   1.148 +				<li>
   1.149 +					Lastly increase any ''max-content'' <i>maximum track sizes</i>
   1.150 +					by <a href="#extra-space">distributing extra space</a>
   1.151 +					as needed to any tracks with max-content maximum sizes
   1.152 +					to account for these items' <i>min-size contributions</i>.
   1.153 +			</ol>
   1.154 +
   1.155 +			Repeat incrementally for items with greater spans until all items have been considered.
   1.156 +	</ol>
   1.157 +
   1.158 +	<p id='extra-space'>
   1.159 +	To <dfn noexport>distribute extra space</dfn> required by a set of intrinsic size contributions,
   1.160 +	<ol>
   1.161 +		<li>
   1.162 +			Maintain separately for each affected track size an amount of planned increase.
   1.163 +			(This prevents the size increases from becoming order-dependent.)
   1.164 +
   1.165 +			For each considered item,
   1.166 +			<ol>
   1.167 +				<li>
   1.168 +					Subtract the corresponding (non-infinite) sizes of all spanned tracks
   1.169 +					from its size contribution to find the item's remaining size contribution.
   1.170 +					This is the space to distribute.
   1.171 +					<pre><var>extra-space</var> = <var>size-contribution</var> - ∑<var>track-sizes</var></pre>
   1.172 +				<li>
   1.173 +					Distribute the space evenly to the tracked increase of each spanned track with an affected size,
   1.174 +					dropping maxed-out tracks as they hit their maximums.
   1.175 +					<pre><var>track-size-increase</var> = max(<var>track-size-increase</var>, <var>share-of-extra-space</var>)</pre>
   1.176 +				<li>
   1.177 +					If space remains after all tracks max out, continue to increase&hellip;
   1.178 +					<ul>
   1.179 +						<li>
   1.180 +							for ''min-content'' minimum sizes,
   1.181 +							any affected tracks that happen to also have intrinsic maximum sizes;
   1.182 +							else all affected tracks.
   1.183 +						<li>
   1.184 +							for ''max-content'' minimum sizes,
   1.185 +							any affected tracks that happen to also have max-content maximum sizes;
   1.186 +							else all affected tracks.
   1.187 +						<li>for intrinsic maximum sizes,
   1.188 +							all affected tracks
   1.189 +					</ul>
   1.190 +				<li>
   1.191 +					Update the tracks' affected sizes by folding in the calculated increase
   1.192 +					so that the next round of space distribution will account for the increase.
   1.193 +			</ol>
   1.194 +	</ol>
   1.195 +
   1.196 +	At this point, all intrinsic <i title="minimum track size">minimum</i>and <i title="maximum track size">maximum track sizes</i>
   1.197 +	will have been resolved to their used lengths.
   1.198 +
   1.199 +<h3 id="resolve-minmax">
   1.200 +Distribute Free Space to ''minmax()'' Ranges</h3>
   1.201 +
   1.202 +	Size all tracks to their <i>minimum track size</i>
   1.203 +	and find the remaining space (the <i>free space</i>) in the <i>grid container</i>.
   1.204 +	If sizing under a max-content constraint, the <i>free space</i> for this step is infinite.
   1.205 +	If sizing under a min-content constraint, the <i>free space</i> for this step is zero.
   1.206 +	If this <i>free space</i> is positive, distribute it evenly to all tracks,
   1.207 +	dropping maxed-out tracks as they hit their maximum sizes.
   1.208 +
   1.209 +<h3 id="resolve-flex">
   1.210 +Distribute Free Space to Flexible Lengths</h3>
   1.211 +
   1.212 +	If the remaining <i>free space</i> after the previous step is finite and positive,
   1.213 +	find the <i>flex fraction</i> by dividing the this space by the sum of all the tracks' <i>flex factors</i>.
   1.214 +
   1.215 +	Otherwise, if the <i>free space</i> is not finite
   1.216 +	(i.e. when the grid container's is sized under a max-content or preferred-size constraint
   1.217 +	or it is auto-sized in infinite available space),
   1.218 +	find the <i>flex fraction</i> by taking the maximum of:
   1.219 +	<ul>
   1.220 +		<li>
   1.221 +			Each flexible track's minimum size divided by its <i>flex factor</i>.
   1.222 +		<li>
   1.223 +			The <i>max-size contribution</i> of each item in a flexible track divided by that track's <i>flex factor</i>.
   1.224 +			For items that span multiple tracks,
   1.225 +			first subtract the used sizes of all spanned non-flexible tracks from the item's <i>max-size contribution</i>,
   1.226 +			then divide by the sum of all spanned flexible tracks' <i>flex factors</i>.
   1.227 +	</ul>
   1.228 +
   1.229 +	Size each flexible track to the product of its <i>flex factor</i> and this calculated <i>flex fraction</i>.
   1.230  
   1.231  <h2 id='pagination'>
   1.232  Fragmenting Grid Layout</h2>

     2.1 --- a/css-grid/Overview.html	Thu Feb 27 18:13:01 2014 -0800
     2.2 +++ b/css-grid/Overview.html	Thu Feb 27 18:22:15 2014 -0800
     2.3 @@ -80,7 +80,7 @@
     2.4  </p>
     2.5    <h1 class="p-name no-ref" id=title>CSS Grid Layout Module Level 1</h1>
     2.6    <h2 class="no-num no-toc no-ref heading settled heading" id=subtitle><span class=content>Editor’s Draft,
     2.7 -    <span class=dt-updated><span class=value-title title=20140205>5 February 2014</span></span></span></h2>
     2.8 +    <span class=dt-updated><span class=value-title title=20140228>28 February 2014</span></span></span></h2>
     2.9    <div data-fill-with=spec-metadata><dl><dt>This version:<dd><a class=u-url href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Latest version:<dd><a href=http://www.w3.org/TR/css-grid-1/>http://www.w3.org/TR/css-grid-1/</a><dt>Editor’s Draft:<dd><a href=http://dev.w3.org/csswg/css-grid/>http://dev.w3.org/csswg/css-grid/</a><dt>Previous Versions:<dd><a href=http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/ rel=previous>http://www.w3.org/TR/2013/WD-css3-grid-layout-20130402/</a><dd><a href=http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/ rel=previous>http://www.w3.org/TR/2012/WD-css3-grid-layout-20121106/</a>
    2.10      <dt>Feedback:</dt>
    2.11          <dd><a href="mailto:www-style@w3.org?subject=%5Bcss-grid%5D%20feedback">www-style@w3.org</a>
    2.12 @@ -89,7 +89,7 @@
    2.13  <dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://www.xanthir.com/contact/>Tab Atkins Jr.</a> (<span class="p-org org">Google</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-url url" href=http://fantasai.inkedblade.net/contact>fantasai</a> (<span class="p-org org">Mozilla</span>)<dd class="p-author h-card vcard"><a class="p-name fn u-email email" href=mailto:ratan@microsoft.com>Rossen Atanassov</a> (<span class="p-org org">Microsoft</span>)<dt>Former Editors:
    2.14  <dd class="p-author h-card vcard"><span class="p-name fn"><a href=mailto:alexmog@microsoft.com>Alex Mogilevsky</a></span> (<span class="p-org org">Microsoft Corporation</span>)<dd class="p-author h-card vcard"><span class="p-name fn"><a href=mailto:pcupp@microsoft.com>Phil Cupp</a></span> (<span class="p-org org">Microsoft Corporation</span>)<dt>Issues List:<dd><a href="https://www.w3.org/Bugs/Public/buglist.cgi?product=CSS&amp;component=Grid+Layout&amp;bug_status=NEW&amp;bug_status=ASSIGNED&amp;bug_status=REOPENED">In Bugzilla</a></dl></div>
    2.15    <div data-fill-with=warning></div>
    2.16 -  <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2013 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
    2.17 +  <p class=copyright data-fill-with=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a> © 2014 <a href=http://www.w3.org/><abbr title="World Wide Web Consortium">W3C</abbr></a><sup>®</sup> (<a href=http://www.csail.mit.edu/><abbr title="Massachusetts Institute of Technology">MIT</abbr></a>, <a href=http://www.ercim.eu/><abbr title="European Research Consortium for Informatics and Mathematics">ERCIM</abbr></a>, <a href=http://www.keio.ac.jp/>Keio</a>, <a href=http://ev.buaa.edu.cn/>Beihang</a>), All Rights Reserved. W3C <a href=http://www.w3.org/Consortium/Legal/ipr-notice#Legal_Disclaimer>liability</a>, <a href=http://www.w3.org/Consortium/Legal/ipr-notice#W3C_Trademarks>trademark</a> and <a href=http://www.w3.org/Consortium/Legal/copyright-documents>document use</a> rules apply.
    2.18  </p>
    2.19    <hr title="Separator for header">
    2.20  </div>
    2.21 @@ -132,76 +132,99 @@
    2.22  <div data-fill-with=at-risk><p>The following features are at-risk, and may be dropped during the CR period:
    2.23  <ul><li>the <a class=css data-link-for=grid-template-rows data-link-type=maybe href=#valuedef-subgrid0 title=subgrid>subgrid</a> value of <a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a> and <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a>, and its component parts individually</ul></div>
    2.24  
    2.25 -<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of contents</span></h2>
    2.26 -<div data-fill-with=table-of-contents><ul class=toc><li><a href=#intro><span class=secno>1</span>
    2.27 -Introduction and Overview</a><ul class=toc><li><a href=#background><span class=secno>1.1</span>
    2.28 -Background and Motivation</a><li><a href=#adapting-to-available-space><span class=secno>1.2</span>
    2.29 -Adapting Layouts to Available Space</a><li><a href=#source-independence><span class=secno>1.3</span>
    2.30 -Source Independence</a><li><a href=#grid-layering><span class=secno>1.4</span>
    2.31 -Grid Layering of Elements</a></ul><li><a href=#grid-concepts><span class=secno>2</span>
    2.32 -Grid Layout Concepts and Terminology</a><ul class=toc><li><a href=#grid-track-concept><span class=secno>2.1</span>
    2.33 -Grid Tracks and Cells</a><li><a href=#grid-line-concept><span class=secno>2.2</span>
    2.34 -Grid Lines</a><li><a href=#grid-area-concept><span class=secno>2.3</span>
    2.35 -Grid Areas</a></ul><li><a href=#grid-model><span class=secno>3</span>
    2.36 -Grid Layout Box Model</a><ul class=toc><li><a href=#grid-containers><span class=secno>3.1</span>
    2.37 -Grid Containers: the <span data-link-type=value title=grid>grid</span> and <span class=css data-link-type=maybe title=inline-grid>inline-grid</span> <span class=property data-link-type=propdesc title=display>display</span> values</a></ul><li><a href=#grid-items><span class=secno>4</span>
    2.38 -Grid Items</a><ul class=toc><li><a href=#visibility-collapse><span class=secno>4.1</span>
    2.39 -	Collapsed Grid Items: the <span class=property data-link-type=propdesc title=visibility>visibility</span> property</a><li><a href=#order-property><span class=secno>4.2</span>
    2.40 -Reordered Grid Items: the <span class=property data-link-type=propdesc title=order>order</span> property</a><li><a href=#static-position><span class=secno>4.3</span>
    2.41 -Static Position of Grid Container Children</a></ul><li><a href=#grid-definition><span class=secno>5</span>
    2.42 -The Explicit Grid</a><ul class=toc><li><a href=#track-sizing><span class=secno>5.1</span>
    2.43 -Track Sizing: the <span class=property data-link-type=propdesc title=grid-template-rows>grid-template-rows</span> and <span class=property data-link-type=propdesc title=grid-template-columns>grid-template-columns</span> properties</a><ul class=toc><li><a href=#named-lines><span class=secno>5.1.1</span>
    2.44 -Named Grid Lines: the ''(<span class=production data-link-type=type title="<custom-ident>">&lt;custom-ident&gt;</span>*)'' syntax</a><li><a href=#repeat-notation><span class=secno>5.1.2</span>
    2.45 -Repeating Rows and Columns: the <span class=css data-link-type=maybe title=repeat()>repeat()</span> notation</a><li><a href=#fr-unit><span class=secno>5.1.3</span>
    2.46 -Flexible Lengths: the <span class=css data-link-type=maybe title=fr>fr</span> unit</a><li><a href=#subgrids><span class=secno>5.1.4</span>
    2.47 -Subgrids: the <span class=css data-link-for=grid-template-rows data-link-type=maybe title=subgrid>subgrid</span> keyword</a><li><a href=#resolved-track-list><span class=secno>5.1.5</span>
    2.48 -Resolved Values</a></ul><li><a href=#grid-template-areas-property><span class=secno>5.2</span>
    2.49 -Named Areas: the <span class=property data-link-type=propdesc title=grid-template-areas>grid-template-areas</span> property</a><ul class=toc><li><a href=#implicit-named-lines><span class=secno>5.2.1</span>
    2.50 -Implicit Named Lines</a><li><a href=#implicit-named-areas><span class=secno>5.2.2</span>
    2.51 -Implicit Named Areas</a></ul><li><a href=#explicit-grid-shorthand><span class=secno>5.3</span>
    2.52 -Explicit Grid Shorthand: the <span class=property data-link-type=propdesc title=grid-template>grid-template</span> property</a></ul><li><a href=#implicit-grids><span class=secno>6</span>
    2.53 -The Implicit Grid</a><ul class=toc><li><a href=#auto-tracks><span class=secno>6.1</span>
    2.54 -Sizing Auto-generated Rows and Columns: the <span class=property data-link-type=propdesc title=grid-auto-rows>grid-auto-rows</span> and <span class=property data-link-type=propdesc title=grid-auto-columns>grid-auto-columns</span> properties</a><li><a href=#grid-auto-flow-property><span class=secno>6.2</span>
    2.55 -Automatic Placement: the <span class=property data-link-type=propdesc title=grid-auto-flow>grid-auto-flow</span> property</a><ul class=toc><li><a href=#auto-placement-algo><span class=secno>6.2.1</span>
    2.56 -Automatic Grid Item Placement Algorithm</a></ul><li><a href=#grid-auto-position-property><span class=secno>6.3</span>
    2.57 -Default Position: the <span class=property data-link-type=propdesc title=grid-auto-position>grid-auto-position</span> property</a></ul><li><a href=#grid-shorthand><span class=secno>7</span>
    2.58 -Grid Definition Shorthand: the <span class=property data-link-type=propdesc title=grid>grid</span> property</a><li><a href=#placement><span class=secno>8</span>
    2.59 -Placing Grid Items</a><ul class=toc><li><a href=#common-uses><span class=secno>8.1</span>
    2.60 -Common Patterns for Grid Placement</a><ul class=toc><li><a href=#common-uses-named-areas><span class=secno>8.1.1</span>
    2.61 -Named Areas</a><li><a href=#common-uses-numeric><span class=secno>8.1.2</span>
    2.62 -Numeric Indexes and Spans</a><li><a href=#common-uses-named-lines><span class=secno>8.1.3</span>
    2.63 -Named Lines and Spans</a><li><a href=#common-uses-auto-placement><span class=secno>8.1.4</span>
    2.64 -Auto Placement</a><li><a href=#common-uses-auto-sizing><span class=secno>8.1.5</span>
    2.65 -Auto Sizing Subgrids</a></ul><li><a href=#line-placement><span class=secno>8.2</span>
    2.66 -Line-based Placement: the <span class=property data-link-type=propdesc title=grid-row-start>grid-row-start</span>, <span class=property data-link-type=propdesc title=grid-column-start>grid-column-start</span>, <span class=property data-link-type=propdesc title=grid-row-end>grid-row-end</span>, and <span class=property data-link-type=propdesc title=grid-column-end>grid-column-end</span> properties</a><ul class=toc><li><a href=#grid-placement-errors><span class=secno>8.2.1</span>
    2.67 -Grid Placement Error Handling</a></ul><li><a href=#placement-shorthands><span class=secno>8.3</span>
    2.68 -Placement Shorthands: the <span class=property data-link-type=propdesc title=grid-column>grid-column</span>, <span class=property data-link-type=propdesc title=grid-row>grid-row</span>, and <span class=property data-link-type=propdesc title=grid-area>grid-area</span> properties</a><li><a href=#abspos-items><span class=secno>8.4</span>
    2.69 -Absolutely-positioned Grid Items</a></ul><li><a href=#alignment><span class=secno>9</span>
    2.70 -Alignment</a><ul class=toc><li><a href=#auto-margins><span class=secno>9.1</span>
    2.71 -Aligning with <span data-link-for=margin data-link-type=value title=auto>auto</span> margins</a><li><a href=#row-align><span class=secno>9.2</span>
    2.72 -Row-axis Alignment: the <span class=property data-link-type=propdesc title=justify-self>justify-self</span> and <span class=property data-link-type=propdesc title=justify-items>justify-items</span> properties</a><li><a href=#column-align><span class=secno>9.3</span>
    2.73 -Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a><li><a href=#grid-align><span class=secno>9.4</span>
    2.74 -Aligning the Grid: the <span class=property data-link-type=propdesc title=justify-content>justify-content</span> and <span class=property data-link-type=propdesc title=align-content>align-content</span> properties</a><li><a href=#z-order><span class=secno>9.5</span>
    2.75 -Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a><li><a href=#grid-baselines><span class=secno>9.6</span>
    2.76 -Grid Baselines</a></ul><li><a href=#layout-algorithm><span class=secno>10</span>
    2.77 -Grid Layout Algorithm</a><ul class=toc><li><a href=#algo-terms><span class=secno>10.1</span>
    2.78 -Definition of Terms for use in Calculating Grid Track Sizes</a><li><a href=#track-sizing-algorithm><span class=secno>10.2</span>
    2.79 -Grid Track Sizing Algorithm</a><li><a href=#intrinsic-sizes><span class=secno>10.3</span>
    2.80 -Intrinsic Sizing</a></ul><li><a href=#pagination><span class=secno>11</span>
    2.81 -Fragmenting Grid Layout</a><li><a href=#acks><span class=secno></span>
    2.82 -Acknowledgements</a><li><a href=#changes><span class=secno></span>
    2.83 -Changes</a><li><a href=#conformance><span class=secno></span>
    2.84 -Conformance</a><ul class=toc><li><a href=#conventions><span class=secno></span>
    2.85 -Document conventions</a><li><a href=#conformance-classes><span class=secno></span>
    2.86 -Conformance classes</a><li><a href=#partial><span class=secno></span>
    2.87 -Partial implementations</a><li><a href=#experimental><span class=secno></span>
    2.88 -Experimental implementations</a><li><a href=#testing><span class=secno></span>
    2.89 -Non-experimental implementations</a></ul><li><a href=#references><span class=secno></span>
    2.90 -References</a><ul class=toc><li><a href=#normative><span class=secno></span>
    2.91 -Normative References</a><li><a href=#informative><span class=secno></span>
    2.92 -Informative References</a></ul><li><a href=#index><span class=secno></span>
    2.93 -Index</a><li><a href=#property-index><span class=secno></span>
    2.94 -Property index</a><li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
    2.95 +<h2 class="no-num no-toc no-ref heading settled heading" id=contents><span class=content>Table of Contents</span></h2>
    2.96 +<div data-fill-with=table-of-contents><ul class=toc>
    2.97 +	<li><a href=#intro><span class=secno>1</span> Introduction and Overview</a>
    2.98 +		<ul class=toc>
    2.99 +		<li><a href=#background><span class=secno>1.1</span> Background and Motivation</a>
   2.100 +		<li><a href=#adapting-to-available-space><span class=secno>1.2</span> Adapting Layouts to Available Space</a>
   2.101 +		<li><a href=#source-independence><span class=secno>1.3</span> Source Independence</a>
   2.102 +		<li><a href=#grid-layering><span class=secno>1.4</span> Grid Layering of Elements</a></ul>
   2.103 +	<li><a href=#grid-concepts><span class=secno>2</span> Grid Layout Concepts and Terminology</a>
   2.104 +		<ul class=toc>
   2.105 +		<li><a href=#grid-track-concept><span class=secno>2.1</span> Grid Tracks and Cells</a>
   2.106 +		<li><a href=#grid-line-concept><span class=secno>2.2</span> Grid Lines</a>
   2.107 +		<li><a href=#grid-area-concept><span class=secno>2.3</span> Grid Areas</a></ul>
   2.108 +	<li><a href=#grid-model><span class=secno>3</span> Grid Layout Box Model</a>
   2.109 +		<ul class=toc>
   2.110 +		<li><a href=#grid-containers><span class=secno>3.1</span> Grid Containers: the <span data-link-type=value title=grid>grid</span> and <span class=css data-link-type=maybe title=inline-grid>inline-grid</span> <span class=property data-link-type=propdesc title=display>display</span> values</a></ul>
   2.111 +	<li><a href=#grid-items><span class=secno>4</span> Grid Items</a>
   2.112 +		<ul class=toc>
   2.113 +		<li><a href=#visibility-collapse><span class=secno>4.1</span> 	Collapsed Grid Items: the <span class=property data-link-type=propdesc title=visibility>visibility</span> property</a>
   2.114 +		<li><a href=#order-property><span class=secno>4.2</span> Reordered Grid Items: the <span class=property data-link-type=propdesc title=order>order</span> property</a>
   2.115 +		<li><a href=#static-position><span class=secno>4.3</span> Static Position of Grid Container Children</a></ul>
   2.116 +	<li><a href=#grid-definition><span class=secno>5</span> The Explicit Grid</a>
   2.117 +		<ul class=toc>
   2.118 +		<li><a href=#track-sizing><span class=secno>5.1</span> Track Sizing: the <span class=property data-link-type=propdesc title=grid-template-rows>grid-template-rows</span> and <span class=property data-link-type=propdesc title=grid-template-columns>grid-template-columns</span> properties</a>
   2.119 +			<ul class=toc>
   2.120 +			<li><a href=#named-lines><span class=secno>5.1.1</span> Named Grid Lines: the ''(<span class=production data-link-type=type title="<custom-ident>">&lt;custom-ident&gt;</span>*)'' syntax</a>
   2.121 +			<li><a href=#repeat-notation><span class=secno>5.1.2</span> Repeating Rows and Columns: the <span class=css data-link-type=maybe title=repeat()>repeat()</span> notation</a>
   2.122 +			<li><a href=#fr-unit><span class=secno>5.1.3</span> Flexible Lengths: the <span class=css data-link-type=maybe title=fr>fr</span> unit</a>
   2.123 +			<li><a href=#subgrids><span class=secno>5.1.4</span> Subgrids: the <span class=css data-link-for=grid-template-rows data-link-type=maybe title=subgrid>subgrid</span> keyword</a>
   2.124 +			<li><a href=#resolved-track-list><span class=secno>5.1.5</span> Resolved Values</a></ul>
   2.125 +		<li><a href=#grid-template-areas-property><span class=secno>5.2</span> Named Areas: the <span class=property data-link-type=propdesc title=grid-template-areas>grid-template-areas</span> property</a>
   2.126 +			<ul class=toc>
   2.127 +			<li><a href=#implicit-named-lines><span class=secno>5.2.1</span> Implicit Named Lines</a>
   2.128 +			<li><a href=#implicit-named-areas><span class=secno>5.2.2</span> Implicit Named Areas</a></ul>
   2.129 +		<li><a href=#explicit-grid-shorthand><span class=secno>5.3</span> Explicit Grid Shorthand: the <span class=property data-link-type=propdesc title=grid-template>grid-template</span> property</a></ul>
   2.130 +	<li><a href=#implicit-grids><span class=secno>6</span> The Implicit Grid</a>
   2.131 +		<ul class=toc>
   2.132 +		<li><a href=#auto-tracks><span class=secno>6.1</span> Sizing Auto-generated Rows and Columns: the <span class=property data-link-type=propdesc title=grid-auto-rows>grid-auto-rows</span> and <span class=property data-link-type=propdesc title=grid-auto-columns>grid-auto-columns</span> properties</a>
   2.133 +		<li><a href=#grid-auto-flow-property><span class=secno>6.2</span> Automatic Placement: the <span class=property data-link-type=propdesc title=grid-auto-flow>grid-auto-flow</span> property</a>
   2.134 +			<ul class=toc>
   2.135 +			<li><a href=#auto-placement-algo><span class=secno>6.2.1</span> Automatic Grid Item Placement Algorithm</a></ul>
   2.136 +		<li><a href=#grid-auto-position-property><span class=secno>6.3</span> Default Position: the <span class=property data-link-type=propdesc title=grid-auto-position>grid-auto-position</span> property</a></ul>
   2.137 +	<li><a href=#grid-shorthand><span class=secno>7</span> Grid Definition Shorthand: the <span class=property data-link-type=propdesc title=grid>grid</span> property</a>
   2.138 +	<li><a href=#placement><span class=secno>8</span> Placing Grid Items</a>
   2.139 +		<ul class=toc>
   2.140 +		<li><a href=#common-uses><span class=secno>8.1</span> Common Patterns for Grid Placement</a>
   2.141 +			<ul class=toc>
   2.142 +			<li><a href=#common-uses-named-areas><span class=secno>8.1.1</span> Named Areas</a>
   2.143 +			<li><a href=#common-uses-numeric><span class=secno>8.1.2</span> Numeric Indexes and Spans</a>
   2.144 +			<li><a href=#common-uses-named-lines><span class=secno>8.1.3</span> Named Lines and Spans</a>
   2.145 +			<li><a href=#common-uses-auto-placement><span class=secno>8.1.4</span> Auto Placement</a>
   2.146 +			<li><a href=#common-uses-auto-sizing><span class=secno>8.1.5</span> Auto Sizing Subgrids</a></ul>
   2.147 +		<li><a href=#line-placement><span class=secno>8.2</span> Line-based Placement: the <span class=property data-link-type=propdesc title=grid-row-start>grid-row-start</span>, <span class=property data-link-type=propdesc title=grid-column-start>grid-column-start</span>, <span class=property data-link-type=propdesc title=grid-row-end>grid-row-end</span>, and <span class=property data-link-type=propdesc title=grid-column-end>grid-column-end</span> properties</a>
   2.148 +			<ul class=toc>
   2.149 +			<li><a href=#grid-placement-errors><span class=secno>8.2.1</span> Grid Placement Error Handling</a></ul>
   2.150 +		<li><a href=#placement-shorthands><span class=secno>8.3</span> Placement Shorthands: the <span class=property data-link-type=propdesc title=grid-column>grid-column</span>, <span class=property data-link-type=propdesc title=grid-row>grid-row</span>, and <span class=property data-link-type=propdesc title=grid-area>grid-area</span> properties</a>
   2.151 +		<li><a href=#abspos-items><span class=secno>8.4</span> Absolutely-positioned Grid Items</a></ul>
   2.152 +	<li><a href=#alignment><span class=secno>9</span> Alignment</a>
   2.153 +		<ul class=toc>
   2.154 +		<li><a href=#auto-margins><span class=secno>9.1</span> Aligning with <span data-link-for=margin data-link-type=value title=auto>auto</span> margins</a>
   2.155 +		<li><a href=#row-align><span class=secno>9.2</span> Row-axis Alignment: the <span class=property data-link-type=propdesc title=justify-self>justify-self</span> and <span class=property data-link-type=propdesc title=justify-items>justify-items</span> properties</a>
   2.156 +		<li><a href=#column-align><span class=secno>9.3</span> Column-axis Alignment: the <span class=property data-link-type=propdesc title=align-self>align-self</span> and <span class=property data-link-type=propdesc title=align-items>align-items</span> properties</a>
   2.157 +		<li><a href=#grid-align><span class=secno>9.4</span> Aligning the Grid: the <span class=property data-link-type=propdesc title=justify-content>justify-content</span> and <span class=property data-link-type=propdesc title=align-content>align-content</span> properties</a>
   2.158 +		<li><a href=#z-order><span class=secno>9.5</span> Z-axis Ordering: the <span class=property data-link-type=propdesc title=z-index>z-index</span> property</a>
   2.159 +		<li><a href=#grid-baselines><span class=secno>9.6</span> Grid Baselines</a></ul>
   2.160 +	<li><a href=#layout-algorithm><span class=secno>10</span> Grid Layout Algorithm</a>
   2.161 +		<ul class=toc>
   2.162 +		<li><a href=#algo-terms><span class=secno>10.1</span> Definition of Terms for use in Calculating Grid Track Sizes</a>
   2.163 +		<li><a href=#track-sizing-algorithm><span class=secno>10.2</span> Grid Track Sizing Algorithm</a>
   2.164 +		<li><a href=#intrinsic-sizes><span class=secno>10.3</span> Intrinsic Sizing</a></ul>
   2.165 +	<li><a href=#layout-algorithm-fantasai><span class=secno>11</span> Rewritten Grid Layout Algorithm</a>
   2.166 +		<ul class=toc>
   2.167 +		<li><a href=#init-sizes><span class=secno>11.1</span> Initialize Minimum and Maximum Track Sizes</a>
   2.168 +		<li><a href=#resolve-intrinsic><span class=secno>11.2</span> Resolve Intrinsic Track Sizes</a>
   2.169 +		<li><a href=#resolve-minmax><span class=secno>11.3</span> Distribute Free Space to <span class=css data-link-type=maybe title=minmax()>minmax()</span> Ranges</a>
   2.170 +		<li><a href=#resolve-flex><span class=secno>11.4</span> Distribute Free Space to Flexible Lengths</a></ul>
   2.171 +	<li><a href=#pagination><span class=secno>12</span> Fragmenting Grid Layout</a>
   2.172 +	<li><a href=#acks><span class=secno></span> Acknowledgements</a>
   2.173 +	<li><a href=#changes><span class=secno></span> Changes</a>
   2.174 +	<li><a href=#conformance><span class=secno></span> Conformance</a>
   2.175 +		<ul class=toc>
   2.176 +		<li><a href=#conventions><span class=secno></span> Document conventions</a>
   2.177 +		<li><a href=#conformance-classes><span class=secno></span> Conformance classes</a>
   2.178 +		<li><a href=#partial><span class=secno></span> Partial implementations</a>
   2.179 +		<li><a href=#experimental><span class=secno></span> Experimental implementations</a>
   2.180 +		<li><a href=#testing><span class=secno></span> Non-experimental implementations</a></ul>
   2.181 +	<li><a href=#references><span class=secno></span> References</a>
   2.182 +		<ul class=toc>
   2.183 +		<li><a href=#normative><span class=secno></span> Normative References</a>
   2.184 +		<li><a href=#informative><span class=secno></span> Informative References</a></ul>
   2.185 +	<li><a href=#index><span class=secno></span> Index</a>
   2.186 +	<li><a href=#property-index><span class=secno></span> Property index</a>
   2.187 +	<li><a href=#issues-index><span class=secno></span>Issues Index</a></ul></div>
   2.188  
   2.189  
   2.190  
   2.191 @@ -810,7 +833,7 @@
   2.192  		whose edges coincide with the padding edges of the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
   2.193  
   2.194  	<p class=note>
   2.195 -		Note that this position is affected by the values of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> on the child,
   2.196 +		Note that this position is affected by the values of <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a> on the child,
   2.197  		and that, as in most other layout models,
   2.198  		the absolutely-positioned child has no effect on the size of the containing block
   2.199  		or layout of its contents.
   2.200 @@ -842,7 +865,7 @@
   2.201  <h3 class="heading settled heading" data-level=5.1 id=track-sizing><span class=secno>5.1 </span><span class=content>
   2.202  Track Sizing: the <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a> and <a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a> properties</span><a class=self-link href=#track-sizing></a></h3>
   2.203  
   2.204 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-columns>grid-template-columns<a class=self-link href=#propdef-grid-template-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-rows>grid-template-rows<a class=self-link href=#propdef-grid-template-rows></a></dfn><tr><th>Value:<td>none | <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> | subgrid <a class="production css-code" data-link-type=type href=#typedef-line-name-list title="<line-name-list>">&lt;line-name-list&gt;</a>?<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified, except for <a class=css data-link-for=grid-template-columns data-link-type=maybe href=#valuedef-auto title=auto>auto</a> (see prose), with lengths made absolute<tr><th>Percentages:<td>see prose</table>
   2.205 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-columns>grid-template-columns<a class=self-link href=#propdef-grid-template-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-rows>grid-template-rows<a class=self-link href=#propdef-grid-template-rows></a></dfn><tr><th>Value:<td class=prod>none | <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> | subgrid <a class="production css-code" data-link-type=type href=#typedef-line-name-list title="<line-name-list>">&lt;line-name-list&gt;</a>?<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>As specified, except for <a class=css data-link-for=grid-template-columns data-link-type=maybe href=#valuedef-auto title=auto>auto</a> (see prose), with lengths made absolute<tr><th>Percentages:<td>see prose</table>
   2.206  	<p>
   2.207  		These properties specify,
   2.208  		as a space-separated <dfn data-dfn-type=dfn data-export="" id=track-list>track list<a class=self-link href=#track-list></a></dfn>,
   2.209 @@ -882,7 +905,7 @@
   2.210  
   2.211  		<dt><dfn class=css-code data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type=value data-export="" id=valuedef-flex><a class="production css-code" data-link-type=type href=#typedef-flex title="<flex>">&lt;flex&gt;</a><a class=self-link href=#valuedef-flex></a></dfn>
   2.212  		<dd>
   2.213 -			A non-negative dimension with the unit "fr".
   2.214 +			A non-negative dimension with the unit <span class=css data-link-type=maybe title=fr>fr</span> specifying the track’s <dfn class=css-code data-dfn-for="grid-template-columns grid-template-rows" data-dfn-type=value data-noexport="" id=valuedef-flex-factor>flex factor<a class=self-link href=#valuedef-flex-factor></a></dfn>.
   2.215  			Each <a class="production css-code" data-link-type=type href=#typedef-flex title="<flex>">&lt;flex&gt;</a> value takes a share of the remaining space in proportion to its value.
   2.216  			See <a href=#fr-unit>Flexible Lengths</a> for more details.
   2.217  
   2.218 @@ -1055,14 +1078,14 @@
   2.219  	<p>
   2.220  		The distribution of <a data-link-type=dfn href=#free-space title="free space">free space</a> occurs after all non-flexible <a data-link-type=dfn href=#sizing-function title="sizing functions">sizing functions</a> have reached their maximum.
   2.221  		The total size of such rows or columns is subtracted from the available space, yielding the <dfn data-dfn-type=dfn data-export="" id=free-space>free space<a class=self-link href=#free-space></a></dfn>,
   2.222 -		which is then divided among the flex-sized rows and columns in proportion to their flex factor.
   2.223 +		which is then divided among the flex-sized rows and columns in proportion to their <i data-link-type=dfn title="flex factor">flex factor</i>.
   2.224  
   2.225  	<p class=note>
   2.226  		Flexible lengths in a <a data-link-type=dfn href=#track-list title="track list">track list</a> work similarly to flexible lengths with a zero base size in <a data-biblio-type=informative data-link-type=biblio href=#css3-flexbox title=css3-flexbox>[CSS3-FLEXBOX]</a>.
   2.227  
   2.228  	<p>
   2.229  		Each column or row’s share of the <a data-link-type=dfn href=#free-space title="free space">free space</a> can be computed as the column or row’s
   2.230 -		<code>&lt;flex&gt; * &lt;free space&gt; / &lt;sum of all flex factors&gt;</code>.
   2.231 +		<code>&lt;flex&gt; * &lt;free space&gt; / &lt;sum of all <i data-link-type=dfn title="flex factors">flex factors</i></code>.
   2.232  		For the purpose of this calculation,
   2.233  		a flexible length in the <var>min</var> position of a <a class=css data-link-type=maybe href=#valuedef-minmax title=minmax()>minmax()</a> function is treated as <span class=css data-link-type=maybe title=0>0</span> (an inflexible length).
   2.234  
   2.235 @@ -1072,10 +1095,10 @@
   2.236  		flex-sized <a data-link-type=dfn href=#grid-track title="grid tracks">grid tracks</a> are sized to their contents while retaining their respective proportions.
   2.237  		The used size of each flex-sized <a data-link-type=dfn href=#grid-track title="grid track">grid track</a> is computed by
   2.238  		determining the <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a> size of each flex-sized <a data-link-type=dfn href=#grid-track title="grid track">grid track</a>
   2.239 -		and dividing that size by the respective flex factor
   2.240 -		to determine a <dfn data-dfn-type=dfn data-export="" id=hypothetical-1fr-size>hypothetical 1fr size<a class=self-link href=#hypothetical-1fr-size></a></dfn>.
   2.241 -		The maximum of those is used as the <span class=css data-link-type=maybe title=1fr>1fr</span> length,
   2.242 -		which is then multiplied by each <a data-link-type=dfn href=#grid-track title="grid track">grid track</a>’s flex factor to determine its final size.
   2.243 +		and dividing that size by the respective <i data-link-type=dfn title="flex factor">flex factor</i>
   2.244 +		to determine a “hypothetical <span class=css data-link-type=maybe title=1fr>1fr</span> size”.
   2.245 +		The maximum of those is used as the resolved <span class=css data-link-type=maybe title=1fr>1fr</span> length (the <dfn data-dfn-type=dfn data-noexport="" id=flex-fraction>flex fraction<a class=self-link href=#flex-fraction></a></dfn>),
   2.246 +		which is then multiplied by each <a data-link-type=dfn href=#grid-track title="grid track">grid track</a>’s <i data-link-type=dfn title="flex factor">flex factor</i> to determine its final size.
   2.247  
   2.248  
   2.249  <h4 class="heading settled heading" data-level=5.1.4 id=subgrids><span class=secno>5.1.4 </span><span class=content>
   2.250 @@ -1173,12 +1196,12 @@
   2.251  
   2.252  		<li>
   2.253  			The <a data-link-type=dfn href=#subgrid title=subgrid>subgrid</a> is always stretched;
   2.254 -			the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> properties on it are ignored.
   2.255 +			the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a> properties on it are ignored.
   2.256  			Any specified width/height constraints are also ignored.
   2.257  
   2.258  		<li>
   2.259  			Layoutwise, the <a data-link-type=dfn href=#subgrid title=subgrid>subgrid</a>’s <a data-link-type=dfn href=#explicit-grid title="explicit grid">explicit grid</a> is always aligned with the corresponding section of the parent <a data-link-type=dfn href=#grid title=grid>grid</a>;
   2.260 -			the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-content title=align-content>align-content</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-content title=justify-content>justify-content</a> properties on it are ignored.
   2.261 +			the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-content title=align-content>align-content</a>/<a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-content title=justify-content>justify-content</a> properties on it are ignored.
   2.262  			However, <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-overflow-3/#overflow0 title=overflow>overflow</a> does apply,
   2.263  			so the contents of the subgrid can be scrolled aside.
   2.264  			(Note: the act of scrolling does not affect layout.)
   2.265 @@ -1256,7 +1279,7 @@
   2.266  <h3 class="heading settled heading" data-level=5.2 id=grid-template-areas-property><span class=secno>5.2 </span><span class=content>
   2.267  Named Areas: the <a class=property data-link-type=propdesc href=#propdef-grid-template-areas title=grid-template-areas>grid-template-areas</a> property</span><a class=self-link href=#grid-template-areas-property></a></h3>
   2.268  
   2.269 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-areas>grid-template-areas<a class=self-link href=#propdef-grid-template-areas></a></dfn><tr><th>Value:<td>none | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a>+<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.270 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template-areas>grid-template-areas<a class=self-link href=#propdef-grid-template-areas></a></dfn><tr><th>Value:<td class=prod>none | <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a>+<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.271  	<p>
   2.272  		This property specifies <dfn data-dfn-type=dfn data-export="" id=named-grid-area title="named grid area">named grid areas<a class=self-link href=#named-grid-area></a></dfn>,
   2.273  		which are not associated with any particular <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>,
   2.274 @@ -1382,7 +1405,7 @@
   2.275  <h3 class="heading settled heading" data-level=5.3 id=explicit-grid-shorthand><span class=secno>5.3 </span><span class=content>
   2.276  Explicit Grid Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a> property</span><a class=self-link href=#explicit-grid-shorthand></a></h3>
   2.277  
   2.278 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template>grid-template<a class=self-link href=#propdef-grid-template></a></dfn><tr><th>Value:<td>none | subgrid | <a class=production data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>&lt;‘grid-template-columns’&gt;</a> / <a class=production data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>&lt;‘grid-template-rows’&gt;</a> |<br> [ <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> / ]? [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a> <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a>? <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? ]+<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.279 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-template>grid-template<a class=self-link href=#propdef-grid-template></a></dfn><tr><th>Value:<td class=prod>none | subgrid | <a class=production data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>&lt;‘grid-template-columns’&gt;</a> / <a class=production data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>&lt;‘grid-template-rows’&gt;</a> |<br> [ <a class="production css-code" data-link-type=type href=#typedef-track-list title="<track-list>">&lt;track-list&gt;</a> / ]? [ <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#string-value title="<string>">&lt;string&gt;</a> <a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a>? <a class="production css-code" data-link-type=type href=#typedef-line-names title="<line-names>">&lt;line-names&gt;</a>? ]+<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.280  	<p>
   2.281  		The <a class=property data-link-type=propdesc href=#propdef-grid-template title=grid-template>grid-template</a> property is a shorthand for setting
   2.282  		<a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a>, <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-template-areas title=grid-template-areas>grid-template-areas</a> in a single declaration.
   2.283 @@ -1470,7 +1493,7 @@
   2.284  <h3 class="heading settled heading" data-level=6.1 id=auto-tracks><span class=secno>6.1 </span><span class=content>
   2.285  Sizing Auto-generated Rows and Columns: the <a class=property data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>grid-auto-rows</a> and <a class=property data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>grid-auto-columns</a> properties</span><a class=self-link href=#auto-tracks></a></h3>
   2.286  
   2.287 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-columns>grid-auto-columns<a class=self-link href=#propdef-grid-auto-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-rows>grid-auto-rows<a class=self-link href=#propdef-grid-auto-rows></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>see <a href=#track-sizing>Track Sizing</a><tr><th>Percentages:<td>see <a href=#track-sizing>Track Sizing</a></table>
   2.288 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-columns>grid-auto-columns<a class=self-link href=#propdef-grid-auto-columns></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-rows>grid-auto-rows<a class=self-link href=#propdef-grid-auto-rows></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-track-size title="<track-size>">&lt;track-size&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>see <a href=#track-sizing>Track Sizing</a><tr><th>Percentages:<td>see <a href=#track-sizing>Track Sizing</a></table>
   2.289  	<p>
   2.290  		If a grid item is positioned into a row or column that is not explicitly sized
   2.291  		by <a class=property data-link-type=propdesc href=#propdef-grid-template-rows title=grid-template-rows>grid-template-rows</a> or <a class=property data-link-type=propdesc href=#propdef-grid-template-columns title=grid-template-columns>grid-template-columns</a>,
   2.292 @@ -1517,7 +1540,7 @@
   2.293  <h3 class="heading settled heading" data-level=6.2 id=grid-auto-flow-property><span class=secno>6.2 </span><span class=content>
   2.294  Automatic Placement: the <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property</span><a class=self-link href=#grid-auto-flow-property></a></h3>
   2.295  
   2.296 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-flow>grid-auto-flow<a class=self-link href=#propdef-grid-auto-flow></a></dfn><tr><th>Value:<td>none | [ [ row | column ] &amp;&amp; dense? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.297 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-flow>grid-auto-flow<a class=self-link href=#propdef-grid-auto-flow></a></dfn><tr><th>Value:<td class=prod>none | [ [ row | column ] &amp;&amp; dense? ]<tr><th>Initial:<td>none<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.298  	<p>
   2.299  		<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> that aren’t explicitly placed are automatically placed into an unoccupied space in the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
   2.300  		The <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a> property controls the direction in which the search for unoccupied space takes place,
   2.301 @@ -1779,7 +1802,7 @@
   2.302  <h3 class="heading settled heading" data-level=6.3 id=grid-auto-position-property><span class=secno>6.3 </span><span class=content>
   2.303  Default Position: the <a class=property data-link-type=propdesc href=#propdef-grid-auto-position title=grid-auto-position>grid-auto-position</a> property</span><a class=self-link href=#grid-auto-position-property></a></h3>
   2.304  
   2.305 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-position>grid-auto-position<a class=self-link href=#propdef-grid-auto-position></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><tr><th>Initial:<td>1 / 1<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.306 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-auto-position>grid-auto-position<a class=self-link href=#propdef-grid-auto-position></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><tr><th>Initial:<td>1 / 1<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.307  <p>	If a <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> doesn’t specify an automatic-placement strategy through <a class=property data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>grid-auto-flow</a>,
   2.308  	any grid items with an <a data-link-type=dfn href=#automatic-grid-position title="automatic grid position">automatic grid position</a> are instead all placed at the default position
   2.309  	specified by <a class=property data-link-type=propdesc href=#propdef-grid-auto-position title=grid-auto-position>grid-auto-position</a>.
   2.310 @@ -1800,7 +1823,7 @@
   2.311  <h2 class="heading settled heading" data-level=7 id=grid-shorthand><span class=secno>7 </span><span class=content>
   2.312  Grid Definition Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property</span><a class=self-link href=#grid-shorthand></a></h2>
   2.313  
   2.314 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.315 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid>grid<a class=self-link href=#propdef-grid></a></dfn><tr><th>Value:<td class=prod><a class=production data-link-type=propdesc href=#propdef-grid-template title=grid-template>&lt;‘grid-template’&gt;</a> | [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-flow title=grid-auto-flow>&lt;‘grid-auto-flow’&gt;</a> [ <a class=production data-link-type=propdesc href=#propdef-grid-auto-columns title=grid-auto-columns>&lt;‘grid-auto-columns’&gt;</a> [ / <a class=production data-link-type=propdesc href=#propdef-grid-auto-rows title=grid-auto-rows>&lt;‘grid-auto-rows’&gt;</a> ]? ]? ]<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-container title="grid containers">grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.316  	<p>
   2.317  		The <a class=property data-link-type=propdesc href=#propdef-grid title=grid>grid</a> property is a shorthand that sets
   2.318  		all of the explicit grid properties
   2.319 @@ -2068,7 +2091,7 @@
   2.320  <h3 class="heading settled heading" data-level=8.2 id=line-placement><span class=secno>8.2 </span><span class=content>
   2.321  Line-based Placement: the <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a> properties</span><a class=self-link href=#line-placement></a></h3>
   2.322  
   2.323 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-start>grid-row-start<a class=self-link href=#propdef-grid-row-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-start>grid-column-start<a class=self-link href=#propdef-grid-column-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-end>grid-row-end<a class=self-link href=#propdef-grid-row-end></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-end>grid-column-end<a class=self-link href=#propdef-grid-column-end></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.324 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-start>grid-row-start<a class=self-link href=#propdef-grid-row-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-start>grid-column-start<a class=self-link href=#propdef-grid-column-start></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row-end>grid-row-end<a class=self-link href=#propdef-grid-row-end></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column-end>grid-column-end<a class=self-link href=#propdef-grid-column-end></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><tr><th>Initial:<td>auto<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>no<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value<tr><th>Percentages:<td>n/a</table>
   2.325  	<pre>  <dfn class=css-code data-dfn-for="grid-row-start grid-column-start grid-row-end grid-column-end" data-dfn-type=type data-export="" id=typedef-grid-line><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a><a class=self-link href=#typedef-grid-line></a></dfn> =
   2.326      auto |
   2.327      <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#identifier-value title="<custom-ident>">&lt;custom-ident&gt;</a> |
   2.328 @@ -2204,7 +2227,7 @@
   2.329  <h3 class="heading settled heading" data-level=8.3 id=placement-shorthands><span class=secno>8.3 </span><span class=content>
   2.330  Placement Shorthands: the <a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a>, <a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a>, and <a class=property data-link-type=propdesc href=#propdef-grid-area title=grid-area>grid-area</a> properties</span><a class=self-link href=#placement-shorthands></a></h3>
   2.331  
   2.332 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row>grid-row<a class=self-link href=#propdef-grid-row></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column>grid-column<a class=self-link href=#propdef-grid-column></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> [ / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> ]?<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.333 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-row>grid-row<a class=self-link href=#propdef-grid-row></a></dfn>, <dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-column>grid-column<a class=self-link href=#propdef-grid-column></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> [ / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> ]?<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.334  	<p>
   2.335  		The <a class=property data-link-type=propdesc href=#propdef-grid-row title=grid-row>grid-row</a> and <a class=property data-link-type=propdesc href=#propdef-grid-column title=grid-column>grid-column</a> properties are shorthands for <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>/<a class=property data-link-type=propdesc href=#propdef-grid-row-end title=grid-row-end>grid-row-end</a> and <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a>/<a class=property data-link-type=propdesc href=#propdef-grid-column-end title=grid-column-end>grid-column-end</a>, respectively.
   2.336  
   2.337 @@ -2220,7 +2243,7 @@
   2.338  		otherwise, it is set to <a class=css-code data-link-for="<grid-line>" data-link-type=value href=#grid-placement-auto title=auto>auto</a>.
   2.339  
   2.340  
   2.341 -<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-area>grid-area<a class=self-link href=#propdef-grid-area></a></dfn><tr><th>Value:<td><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> [ / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> ]{0,3}<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.342 +<table class="definition propdef"><tr><th>Name:<td><dfn class=css-code data-dfn-type=property data-export="" id=propdef-grid-area>grid-area<a class=self-link href=#propdef-grid-area></a></dfn><tr><th>Value:<td class=prod><a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> [ / <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> ]{0,3}<tr><th>Initial:<td>see individual properties<tr><th>Applies to:<td><a data-link-type=dfn href=#grid-item title="grid items">grid items</a><tr><th>Inherited:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties<tr><th>Percentages:<td>see individual properties</table>
   2.343  	<p>
   2.344  		If four <a class="production css-code" data-link-type=type href=#typedef-grid-line title="<grid-line>">&lt;grid-line&gt;</a> values are specified,
   2.345  		<a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a> is set to the first value,
   2.346 @@ -2325,7 +2348,7 @@
   2.347  	<p>
   2.348  		By default,
   2.349  		<a data-link-type=dfn href=#grid-item title="grid items">grid items</a> stretch to fill their <a data-link-type=dfn href=#grid-area title="grid area">grid area</a>.
   2.350 -		However, if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> compute to a value other than <span class=css data-link-type=maybe title=stretch>stretch</span>
   2.351 +		However, if <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a> compute to a value other than <span class=css data-link-type=maybe title=stretch>stretch</span>
   2.352  		or margins are <a class=css-code data-link-for=margin data-link-type=value title=auto>auto</a>,
   2.353  		<a data-link-type=dfn href=#grid-item title="grid items">grid items</a> will auto-size to fit their contents.
   2.354  
   2.355 @@ -2365,12 +2388,12 @@
   2.356  
   2.357  
   2.358  <h3 class="heading settled heading" data-level=9.2 id=row-align><span class=secno>9.2 </span><span class=content>
   2.359 -Row-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-items title=justify-items>justify-items</a> properties</span><a class=self-link href=#row-align></a></h3>
   2.360 +Row-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-items title=justify-items>justify-items</a> properties</span><a class=self-link href=#row-align></a></h3>
   2.361  
   2.362  	<p>
   2.363  		<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> can be aligned in the inline dimension
   2.364 -		by using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a> property on the <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>
   2.365 -		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-items title=justify-items>justify-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
   2.366 +		by using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a> property on the <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>
   2.367 +		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-items title=justify-items>justify-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
   2.368  		as defined in <a data-biblio-type=normative data-link-type=biblio href=#css3-align title=css3-align>[CSS3-ALIGN]</a>.
   2.369  
   2.370  	<div class=example>
   2.371 @@ -2385,21 +2408,21 @@
   2.372  
   2.373  
   2.374  <h3 class="heading settled heading" data-level=9.3 id=column-align><span class=secno>9.3 </span><span class=content>
   2.375 -Column-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-items title=align-items>align-items</a> properties</span><a class=self-link href=#column-align></a></h3>
   2.376 +Column-axis Alignment: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-items title=align-items>align-items</a> properties</span><a class=self-link href=#column-align></a></h3>
   2.377  
   2.378  	<p>
   2.379  		<a data-link-type=dfn href=#grid-item title="grid items">Grid items</a> can also be aligned in the block dimension
   2.380  		(perpendicular to the inline dimension)
   2.381 -		by using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> property on the <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>
   2.382 -		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-items title=align-items>align-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
   2.383 +		by using the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a> property on the <a data-link-type=dfn href=#grid-item title="grid item">grid item</a>
   2.384 +		or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-items title=align-items>align-items</a> property on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>,
   2.385  		as defined in <a data-biblio-type=normative data-link-type=biblio href=#css3-align title=css3-align>[CSS3-ALIGN]</a>.
   2.386  
   2.387  <h3 class="heading settled heading" data-level=9.4 id=grid-align><span class=secno>9.4 </span><span class=content>
   2.388 -Aligning the Grid: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-content title=align-content>align-content</a> properties</span><a class=self-link href=#grid-align></a></h3>
   2.389 +Aligning the Grid: the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-content title=align-content>align-content</a> properties</span><a class=self-link href=#grid-align></a></h3>
   2.390  
   2.391  <p>	If the <a data-link-type=dfn href=#grid title=grid>grid</a>’s outer edges do not correspond to the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>’s padding edges
   2.392  	(for example, if no columns are flex-sized),
   2.393 -	the <a data-link-type=dfn href=#grid title=grid>grid</a> is aligned within the padding box according to the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-content title=align-content>align-content</a> properties on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
   2.394 +	the <a data-link-type=dfn href=#grid title=grid>grid</a> is aligned within the padding box according to the <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-content title=justify-content>justify-content</a> and <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-content title=align-content>align-content</a> properties on the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
   2.395  
   2.396  	<div class=example>
   2.397  		For example, the following grid is centered vertically,
   2.398 @@ -2497,7 +2520,7 @@
   2.399  
   2.400  	<p>
   2.401  		A <a data-link-type=dfn href=#grid-item title="grid item">grid item</a> <dfn data-dfn-type=dfn data-export="" id=baseline-participation>participates in baseline alignment<a class=self-link href=#baseline-participation></a></dfn> in a particular dimension
   2.402 -		if its value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#align-self title=align-self>align-self</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#justify-self title=justify-self>justify-self</a>, as appropriate, is <span class=css data-link-type=maybe title=baseline>baseline</span>
   2.403 +		if its value for <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-align-self title=align-self>align-self</a> or <a class=property data-link-type=propdesc href=http://dev.w3.org/csswg/css-align-3/#propdef-justify-self title=justify-self>justify-self</a>, as appropriate, is <span class=css data-link-type=maybe title=baseline>baseline</span>
   2.404  		and its inline axis is parallel to that dimension.
   2.405  
   2.406  	<p>
   2.407 @@ -3006,8 +3029,179 @@
   2.408  	<p class=issue id=issue-facbb775><a class=self-link href=#issue-facbb775></a>
   2.409  		This section’ll need updating after the algorithm is rewritten.
   2.410  
   2.411 -
   2.412 -<h2 class="heading settled heading" data-level=11 id=pagination><span class=secno>11 </span><span class=content>
   2.413 +<h2 class="heading settled heading" data-level=11 id=layout-algorithm-fantasai><span class=secno>11 </span><span class=content>
   2.414 +Rewritten Grid Layout Algorithm</span><a class=self-link href=#layout-algorithm-fantasai></a></h2>
   2.415 +
   2.416 +	<p class=issue id=issue-607e19e8><a class=self-link href=#issue-607e19e8></a>
   2.417 +		This should be functionally identical to the Microsoft algorithm.
   2.418 +		If not, please let Tab and fantasai know in what cases it’s not!
   2.419 +
   2.420 +<p>	Each track has a <dfn data-dfn-type=dfn data-noexport="" id=minimum-track-size title="minimum track size">minimum<a class=self-link href=#minimum-track-size></a></dfn> and
   2.421 +	a <dfn data-dfn-type=dfn data-noexport="" id=maximum-track-size title="maximum track size">maximum<a class=self-link href=#maximum-track-size></a></dfn> <a data-link-type=dfn href=#sizing-function title="sizing function">sizing function</a>
   2.422 +	(which may be the same).
   2.423 +	Each <a data-link-type=dfn href=#sizing-function title="sizing function">sizing function</a> is either:
   2.424 +	<ul>
   2.425 +		<li>A fixed size (<a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#length-value title="<length>">&lt;length&gt;</a> or resolved <a class="production css-code" data-link-type=type href=http://dev.w3.org/csswg/css-values-3/#percentage-value title="<percentage>">&lt;percentage&gt;</a>).
   2.426 +		<li>An intrinsic size (<a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a> or <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a>).
   2.427 +		<li>A flexible size (<a class="production css-code" data-link-type=type href=#typedef-flex title="<flex>">&lt;flex&gt;</a>).
   2.428 +	</ul>
   2.429 +
   2.430 +<p>	The grid layout algorithm defines how to resolve these sizing constraints into used track sizes.
   2.431 +	The grid items are then laid out into their respective <a data-link-type=dfn href=#grid-area title="grid areas">grid areas</a>.
   2.432 +
   2.433 +	<ol>
   2.434 +		<li>First, the <a data-link-type=dfn href=#track-sizing-algorithm0 title="track sizing algorithm">track sizing algorithm</a> is used to resolve the sizes of the grid columns.
   2.435 +		<li>Next, the <a data-link-type=dfn href=#track-sizing-algorithm0 title="track sizing algorithm">track sizing algorithm</a> resolves the sizes of the grid rows.
   2.436 +		<li>Then, if the <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contribution">min-size contribution</a> of any grid items have changed
   2.437 +			based on the row sizes calculated in step 2,
   2.438 +			steps 1 and 2 are repeated with the new <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contribution">min-size contribution</a> (once only).
   2.439 +			<p class=issue id=issue-6778f1ae><a class=self-link href=#issue-6778f1ae></a>
   2.440 +				What is this solving and is this the right solution?
   2.441 +	</ol>
   2.442 +
   2.443 +<p>	The remainder of this section is the <dfn data-dfn-type=dfn data-noexport="" id=track-sizing-algorithm0>track sizing algorithm<a class=self-link href=#track-sizing-algorithm0></a></dfn>. There are four steps:
   2.444 +	<ol>
   2.445 +		<li><a href=#init-sizes>Initializing Used Sizes</a>
   2.446 +		<li><a href=#resolve-intrinsic>Resolving Intrinsic Track Sizes</a>
   2.447 +		<li><a href=#resolve-minmax>Distributing Free Space to <a class=css data-link-type=maybe href=#valuedef-minmax title=minmax()>minmax()</a> Ranges</a>
   2.448 +		<li><a href=#resolve-flex>Distributing Free Space to Flexible Lengths</a>
   2.449 +	</ol>
   2.450 +
   2.451 +<h3 class="heading settled heading" data-level=11.1 id=init-sizes><span class=secno>11.1 </span><span class=content>
   2.452 +Initialize Minimum and Maximum Track Sizes</span><a class=self-link href=#init-sizes></a></h3>
   2.453 +
   2.454 +<p>	For fixed track sizes,
   2.455 +	use that resolved size.
   2.456 +
   2.457 +<p>	For intrinsic track sizes,
   2.458 +	use an initial <a data-link-type=dfn href=#minimum-track-size title="minimum track size">minimum track size</a> of zero and an initial <a data-link-type=dfn href=#maximum-track-size title="maximum track size">maximum track size</a> of infinity.
   2.459 +
   2.460 +<p>    For flexible track sizes,
   2.461 +	use an initial <a data-link-type=dfn href=#maximum-track-size title="maximum track size">maximum track size</a> of infinity.
   2.462 +
   2.463 +<p>	A flexible <a data-link-type=dfn href=#minimum-track-size title="minimum track size">minimum track size</a> is treated exactly as a fixed track size of zero;
   2.464 +    except when the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a> is being sized under a <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-content-constraint title="min-content constraint">min-content constraint</a>,
   2.465 +	in which case it is treated exactly as <a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a>.
   2.466 +	<span class=issue id=issue-b256823c><a class=self-link href=#issue-b256823c></a>This seems correct, but should be checked because it wasn’t in the original algorithm.</span>
   2.467 +
   2.468 +<p>	These initial sizes will be resolved in subsequent steps.
   2.469 +
   2.470 +<h3 class="heading settled heading" data-level=11.2 id=resolve-intrinsic><span class=secno>11.2 </span><span class=content>
   2.471 +Resolve Intrinsic Track Sizes</span><a class=self-link href=#resolve-intrinsic></a></h3>
   2.472 +
   2.473 +<p>	The following steps resolve intrinsic track sizes to used lengths.
   2.474 +	First it resolves those sizes based on items that are contained wholly within a single track.
   2.475 +	Then it gradually adds in the space requirements of items that span multiple tracks,
   2.476 +	evenly increasing their sizes insofar as possible.
   2.477 +
   2.478 +	<ol>
   2.479 +		<li>
   2.480 +			For each track with an intrinsic size, consider the items with a span of 1:
   2.481 +			<ul>
   2.482 +				<li>Set any <a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a> track size to the maximum of their <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contributions">min-size contributions</a>.
   2.483 +				<li>Set any <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a> track size to the maximum of their <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-size-contributionmax-extent-contributionmax-measure-contribution title="max-size contributions">max-size contributions</a>.
   2.484 +			</ul>
   2.485 +		<li>
   2.486 +			Next, consider the items with a span of 2
   2.487 +			and that do not span a track with a flexible maximum size:
   2.488 +			<ol>
   2.489 +				<li>
   2.490 +					First increase any <a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a> <a data-link-type=dfn href=#minimum-track-size title="minimum track sizes">minimum track sizes</a>
   2.491 +					by <a href=#extra-space>distributing extra space</a>
   2.492 +					as needed to any tracks with intrinsic minimum sizes
   2.493 +					to account for these items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contributions">min-size contributions</a>.
   2.494 +				<li>
   2.495 +					Next increase any <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a> <a data-link-type=dfn href=#minimum-track-size title="minimum track sizes">minimum track sizes</a>
   2.496 +					by <a href=#extra-space>distributing extra space</a>
   2.497 +					as needed to any tracks with max-content minimum sizes
   2.498 +					to account for these items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-size-contributionmax-extent-contributionmax-measure-contribution title="max-size contributions">max-size contributions</a>.
   2.499 +				<li>
   2.500 +					Third increase any <a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a> <a data-link-type=dfn href=#maximum-track-size title="maximum track sizes">maximum track sizes</a>
   2.501 +					by <a href=#extra-space>distributing extra space</a>
   2.502 +					as needed to any tracks with intrinsic maximum sizes
   2.503 +					to account for these items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contributions">min-size contributions</a>.
   2.504 +				<li>
   2.505 +					Lastly increase any <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a> <a data-link-type=dfn href=#maximum-track-size title="maximum track sizes">maximum track sizes</a>
   2.506 +					by <a href=#extra-space>distributing extra space</a>
   2.507 +					as needed to any tracks with max-content maximum sizes
   2.508 +					to account for these items' <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#min-size-contributionmin-extent-contributionmin-measure-contribution title="min-size contributions">min-size contributions</a>.
   2.509 +			</ol>
   2.510 +
   2.511 +<p>			Repeat incrementally for items with greater spans until all items have been considered.
   2.512 +	</ol>
   2.513 +
   2.514 +	<p id=extra-space>
   2.515 +	To <dfn data-dfn-type=dfn data-noexport="" id=distribute-extra-space>distribute extra space<a class=self-link href=#distribute-extra-space></a></dfn> required by a set of intrinsic size contributions,
   2.516 +	<ol>
   2.517 +		<li>
   2.518 +			Maintain separately for each affected track size an amount of planned increase.
   2.519 +			(This prevents the size increases from becoming order-dependent.)
   2.520 +
   2.521 +<p>			For each considered item,
   2.522 +			<ol>
   2.523 +				<li>
   2.524 +					Subtract the corresponding (non-infinite) sizes of all spanned tracks
   2.525 +					from its size contribution to find the item’s remaining size contribution.
   2.526 +					This is the space to distribute.
   2.527 +<pre><var>extra-space</var> = <var>size-contribution</var> - ∑<var>track-sizes</var></pre>				<li>
   2.528 +					Distribute the space evenly to the tracked increase of each spanned track with an affected size,
   2.529 +					dropping maxed-out tracks as they hit their maximums.
   2.530 +<pre><var>track-size-increase</var> = max(<var>track-size-increase</var>, <var>share-of-extra-space</var>)</pre>				<li>
   2.531 +					If space remains after all tracks max out, continue to increase…
   2.532 +					<ul>
   2.533 +						<li>
   2.534 +							for <a class=css data-link-type=maybe href=#valuedef-min-content title=min-content>min-content</a> minimum sizes,
   2.535 +							any affected tracks that happen to also have intrinsic maximum sizes;
   2.536 +							else all affected tracks.
   2.537 +						<li>
   2.538 +							for <a class=css data-link-type=maybe href=#valuedef-max-content title=max-content>max-content</a> minimum sizes,
   2.539 +							any affected tracks that happen to also have max-content maximum sizes;
   2.540 +							else all affected tracks.
   2.541 +						<li>for intrinsic maximum sizes,
   2.542 +							all affected tracks
   2.543 +					</ul>
   2.544 +				<li>
   2.545 +					Update the tracks' affected sizes by folding in the calculated increase
   2.546 +					so that the next round of space distribution will account for the increase.
   2.547 +			</ol>
   2.548 +	</ol>
   2.549 +
   2.550 +<p>	At this point, all intrinsic <a data-link-type=dfn href=#minimum-track-size title="minimum track size">minimum</a>and <a data-link-type=dfn href=#maximum-track-size title="maximum track size">maximum track sizes</a>
   2.551 +	will have been resolved to their used lengths.
   2.552 +
   2.553 +<h3 class="heading settled heading" data-level=11.3 id=resolve-minmax><span class=secno>11.3 </span><span class=content>
   2.554 +Distribute Free Space to <a class=css data-link-type=maybe href=#valuedef-minmax title=minmax()>minmax()</a> Ranges</span><a class=self-link href=#resolve-minmax></a></h3>
   2.555 +
   2.556 +<p>	Size all tracks to their <a data-link-type=dfn href=#minimum-track-size title="minimum track size">minimum track size</a>
   2.557 +	and find the remaining space (the <a data-link-type=dfn href=#free-space title="free space">free space</a>) in the <a data-link-type=dfn href=#grid-container title="grid container">grid container</a>.
   2.558 +	If sizing under a max-content constraint, the <a data-link-type=dfn href=#free-space title="free space">free space</a> for this step is infinite.
   2.559 +	If sizing under a min-content constraint, the <a data-link-type=dfn href=#free-space title="free space">free space</a> for this step is zero.
   2.560 +	If this <a data-link-type=dfn href=#free-space title="free space">free space</a> is positive, distribute it evenly to all tracks,
   2.561 +	dropping maxed-out tracks as they hit their maximum sizes.
   2.562 +
   2.563 +<h3 class="heading settled heading" data-level=11.4 id=resolve-flex><span class=secno>11.4 </span><span class=content>
   2.564 +Distribute Free Space to Flexible Lengths</span><a class=self-link href=#resolve-flex></a></h3>
   2.565 +
   2.566 +<p>	If the remaining <a data-link-type=dfn href=#free-space title="free space">free space</a> after the previous step is finite and positive,
   2.567 +	find the <a data-link-type=dfn href=#flex-fraction title="flex fraction">flex fraction</a> by dividing the this space by the sum of all the tracks' <i data-link-type=dfn title="flex factors">flex factors</i>.
   2.568 +
   2.569 +<p>	Otherwise, if the <a data-link-type=dfn href=#free-space title="free space">free space</a> is not finite
   2.570 +	(i.e. when the grid container’s is sized under a max-content or preferred-size constraint
   2.571 +	or it is auto-sized in infinite available space),
   2.572 +	find the <a data-link-type=dfn href=#flex-fraction title="flex fraction">flex fraction</a> by taking the maximum of:
   2.573 +	<ul>
   2.574 +		<li>
   2.575 +			Each flexible track’s minimum size divided by its <i data-link-type=dfn title="flex factor">flex factor</i>.
   2.576 +		<li>
   2.577 +			The <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-size-contributionmax-extent-contributionmax-measure-contribution title="max-size contribution">max-size contribution</a> of each item in a flexible track divided by that track’s <i data-link-type=dfn title="flex factor">flex factor</i>.
   2.578 +			For items that span multiple tracks,
   2.579 +			first subtract the used sizes of all spanned non-flexible tracks from the item’s <a data-link-type=dfn href=http://dev.w3.org/csswg/css-sizing-3/#max-size-contributionmax-extent-contributionmax-measure-contribution title="max-size contribution">max-size contribution</a>,
   2.580 +			then divide by the sum of all spanned flexible tracks' <i data-link-type=dfn title="flex factors">flex factors</i>.
   2.581 +	</ul>
   2.582 +
   2.583 +<p>	Size each flexible track to the product of its <i data-link-type=dfn title="flex factor">flex factor</i> and this calculated <a data-link-type=dfn href=#flex-fraction title="flex fraction">flex fraction</a>.
   2.584 +
   2.585 +<h2 class="heading settled heading" data-level=12 id=pagination><span class=secno>12 </span><span class=content>
   2.586  Fragmenting Grid Layout</span><a class=self-link href=#pagination></a></h2>
   2.587  
   2.588  	<p class=issue id=issue-64ae91a4><a class=self-link href=#issue-64ae91a4></a>
   2.589 @@ -3202,10 +3396,13 @@
   2.590  <li>definite row span, <a href=#definite-grid-span title="section 8">8</a>
   2.591  <li>definite span, <a href=#definite-grid-span title="section 8">8</a>
   2.592  <li>dense, <a href=#valuedef-dense title="section 6.2">6.2</a>
   2.593 +<li>distribute extra space, <a href=#distribute-extra-space title="section 11.2">11.2</a>
   2.594  <li>explicit grid, <a href=#explicit-grid title="section 5">5</a>
   2.595  <li>&lt;flex&gt;<ul><li>value for grid-template-columns, grid-template-rows, <a href=#valuedef-flex title="section 5.1">5.1</a>
   2.596  <li>(type), <a href=#typedef-flex title="section 5.1.3">5.1.3</a>
   2.597 -</ul><li>flexible length, <a href=#flexible-length title="section 5.1.3">5.1.3</a>
   2.598 +</ul><li>flex factor, <a href=#valuedef-flex-factor title="section 5.1">5.1</a>
   2.599 +<li>flex fraction, <a href=#flex-fraction title="section 5.1.3">5.1.3</a>
   2.600 +<li>flexible length, <a href=#flexible-length title="section 5.1.3">5.1.3</a>
   2.601  <li>free space, <a href=#free-space title="section 5.1.3">5.1.3</a>
   2.602  <li>grid<ul><li>definition of, <a href=#grid title="section 2">2</a>
   2.603  <li>value for display, <a href=#valuedef-grid title="section 3.1">3.1</a>
   2.604 @@ -3243,7 +3440,6 @@
   2.605  <li>&lt;‘grid-template-columns’&gt; / &lt;‘grid-template-rows’&gt;, <a href=#valuedef-grid-template-columns--grid-template-rows title="section 5.3">5.3</a>
   2.606  <li>grid-template-rows, <a href=#propdef-grid-template-rows title="section 5.1">5.1</a>
   2.607  <li>Grid track, <a href=#grid-track title="section 2.1">2.1</a>
   2.608 -<li>hypothetical 1fr size, <a href=#hypothetical-1fr-size title="section 5.1.3">5.1.3</a>
   2.609  <li>implicit grid, <a href=#implicit-grid title="section 6">6</a>
   2.610  <li>implicit grid column, <a href=#implicit-grid-track title="section 6.1">6.1</a>
   2.611  <li>implicit grid row, <a href=#implicit-grid-track title="section 6.1">6.1</a>
   2.612 @@ -3256,8 +3452,10 @@
   2.613  <li>&lt;line-name-list&gt;, <a href=#typedef-line-name-list title="section 5.1">5.1</a>
   2.614  <li>&lt;line-names&gt;, <a href=#typedef-line-names title="section 5.1">5.1</a>
   2.615  <li>max-content, <a href=#valuedef-max-content title="section 5.1">5.1</a>
   2.616 +<li>maximum track size, <a href=#maximum-track-size title="section 11">11</a>
   2.617  <li>MaxTrackSizingFunction, <a href=#MaxTrackSizingFunction-definition title="section 10.1">10.1</a>
   2.618  <li>min-content, <a href=#valuedef-min-content title="section 5.1">5.1</a>
   2.619 +<li>minimum track size, <a href=#minimum-track-size title="section 11">11</a>
   2.620  <li>minmax(), <a href=#valuedef-minmax title="section 5.1">5.1</a>
   2.621  <li>MinTrackSizingFunction, <a href=#MinTrackSizingFunction-definition title="section 10.1">10.1</a>
   2.622  <li>named cell token, <a href=#named-cell-token title="section 5.2">5.2</a>
   2.623 @@ -3291,6 +3489,7 @@
   2.624  <li>[ &lt;track-list&gt; / ]?
   2.625  				[ &lt;line-names&gt;? &lt;string&gt; [ &lt;track-size&gt; &lt;line-names&gt; ]? ]+, <a href=#valuedef--track-list---line-names-string--track-size-line-names-- title="section 5.3">5.3</a>
   2.626  <li>&lt;track-size&gt;, <a href=#typedef-track-size title="section 5.1">5.1</a>
   2.627 +<li>track sizing algorithm, <a href=#track-sizing-algorithm0 title="section 11">11</a>
   2.628  <li>trash token, <a href=#trash-token title="section 5.2">5.2</a>
   2.629  </ul></div>
   2.630  
   2.631 @@ -3347,8 +3546,15 @@
   2.632  		<a href=#issue-7a82b645> ↵ </a></div><div class=issue>
   2.633  		This section’ll need updating after the algorithm is rewritten.
   2.634  
   2.635 -
   2.636  <a href=#issue-facbb775> ↵ </a></div><div class=issue>
   2.637 +		This should be functionally identical to the Microsoft algorithm.
   2.638 +		If not, please let Tab and fantasai know in what cases it’s not!
   2.639 +
   2.640 +<a href=#issue-607e19e8> ↵ </a></div><div class=issue>
   2.641 +				What is this solving and is this the right solution?
   2.642 +	<a href=#issue-6778f1ae> ↵ </a></div><div class=issue>This seems correct, but should be checked because it wasn’t in the original algorithm.<a href=#issue-b256823c> ↵ </a></div>
   2.643 +
   2.644 +<div class=issue>
   2.645  		Fill this in.
   2.646  
   2.647  <a href=#issue-64ae91a4> ↵ </a></div></div>
   2.648 \ No newline at end of file