[css-grid] First draft of 'grid-auto-position'.

Author: tabatkins

css-grid/Overview.html

@@ -122,7 +122,8 @@ <h2 class="no-num no-toc no-ref" id=contents><span class=content>Table of conten
 The Implicit Grid</a><ul class=toc><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><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><ul class=toc><li><a href=#auto-placement-algo><span class=secno>6.2.1</span>
-Automatic Grid Item Placement Algorithm</a></ul><li><a href=#implicit-grid-shorthand><span class=secno>6.3</span>
+Automatic Grid Item Placement Algorithm</a></ul><li><a href=#grid-auto-position-property><span class=secno>6.3</span>
+Automatic Placement: the <span class=property data-link-type=propdesc title=grid-auto-position>grid-auto-position</span> property</a><li><a href=#implicit-grid-shorthand><span class=secno>6.4</span>
 Implicit Grid Shorthand: the <span class=property data-link-type=propdesc title=grid-auto>grid-auto</span> property</a></ul><li><a href=#placement><span class=secno>7</span>
 Placing Grid Items</a><ul class=toc><li><a href=#line-placement><span class=secno>7.1</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><li><a href=#placement-shorthands><span class=secno>7.2</span>
@@ -1422,15 +1423,15 @@ <h3 data-level=6.2 id=grid-auto-flow-property><span class=secno>6.2 </span><span
 
 <table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid-auto-flow>grid-auto-flow</dfn><tr><th>Value:<td>none | [ [ rows | columns ] &amp;&amp; dense? ]<tr><th>Initial:<td>rows<tr><th>Applies to:<td><a href=#grid-container>grid containers</a><tr><th>Inherited:<td>no<tr><th>Percentages:<td>n/a<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table>
 	<p>
-		<a href=#grid-item>Grid items</a> that aren't explicitly placed are are automatically placed into an unoccupied space in the <a href=#grid-container>grid container</a>.
+		<a href=#grid-item>Grid items</a> that aren't explicitly placed are automatically placed into an unoccupied space in the <a href=#grid-container>grid container</a>.
 		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, 
 		and whether rows or columns are added as needed to accommodate the content.
 
 	<dl data-dfn-for=grid-auto-flow data-dfn-type=value>
 		<dt><dfn data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-none>none</dfn>
 		<dd>
 			Rather than use the auto-placement algorithm,
-			auto-placed <a href=#grid-item>grid items</a> are simply positioned according to the <a class=property data-link-type=propdesc title=grid-auto-position>grid-auto-position</a> property.
+			auto-placed <a href=#grid-item>grid items</a> are simply positioned according to the <a class=property data-link-type=propdesc href=#propdef-grid-auto-position title=grid-auto-position>grid-auto-position</a> property.
 
 		<dt><dfn data-dfn-for=grid-auto-flow data-dfn-type=value data-export="" id=valuedef-rows>rows</dfn>
 		<dd>
@@ -1603,7 +1604,23 @@ <h4 data-level=6.2.1 id=auto-placement-algo><span class=secno>6.2.1 </span><span
 	<p class=issue>
 		Edit the algorithm to allow for dense packing.
 
-<h3 data-level=6.3 id=implicit-grid-shorthand><span class=secno>6.3 </span><span class=content>
+<h3 data-level=6.3 id=grid-auto-position-property><span class=secno>6.3 </span><span class=content>
+Automatic Placement: 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=section-link href=#grid-auto-position-property>§</a></h3>
+
+<table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid-auto-position>grid-auto-position</dfn><tr><th>Value:<td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a> / <a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><tr><th>Initial:<td>1 / 1<tr><th>Applies to:<td><a href=#grid-container>grid containers</a><tr><th>Inherited:<td>no<tr><th>Percentages:<td>na/<tr><th>Media:<td>visual<tr><th>Computed value:<td>specified value</table>
+<p>	If a <a href=#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>,
+	any grid items with an <a href=#automatic0>automatic grid position</a> are instead all placed at the default position
+	specified by <a class=property data-link-type=propdesc href=#propdef-grid-auto-position title=grid-auto-position>grid-auto-position</a>.
+
+<p>	Interpret the two <a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a>s as if they were specified in <a class=property data-link-type=propdesc href=#propdef-grid-column-start title=grid-column-start>grid-column-start</a> and <a class=property data-link-type=propdesc href=#propdef-grid-row-start title=grid-row-start>grid-row-start</a>, respectively,
+	of a hypothetical <a href=#grid-item>grid item</a>,
+	treating <a class=css data-link-type=maybe href=#valuedef-auto>auto</a> as <span class=css data-link-type=maybe>1</span> for this purpose.
+	The resulting lines of the <a href=#grid-container>grid container</a>
+	become a <a href=#definite0>definite grid position</a> in both axises
+	for the auto-placed <a href=#grid-item>grid items</a>.
+
+
+<h3 data-level=6.4 id=implicit-grid-shorthand><span class=secno>6.4 </span><span class=content>
 Implicit Grid Shorthand: the <a class=property data-link-type=propdesc href=#propdef-grid-auto title=grid-auto>grid-auto</a> property</span><a class=section-link href=#implicit-grid-shorthand>§</a></h3>
 
 <table class=propdef><tr><th>Name:<td><dfn data-dfn-type=property data-export="" id=propdef-grid-auto>grid-auto</dfn><tr><th>Value:<td><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 href=#grid-container>grid containers</a><tr><th>Inherited:<td>see individual properties<tr><th>Percentages:<td>see individual properties<tr><th>Media:<td>visual<tr><th>Computed value:<td>see individual properties</table>
@@ -2807,6 +2824,7 @@ <h2 class="no-num no-ref" id=property-index><span class=content>
 <tr><th scope=row><a data-property="">grid-auto-columns</a><td><a class=production data-link-type=type href=#typedef-track-size>&lt;track-size&gt;</a><td>auto<td><td>no<td>see <a href=#track-sizing>Track Sizing</a><td>visual<td><a href=#grid-container>grid containers</a><td>see <a href=#track-sizing>Track Sizing</a><td>
 <tr><th scope=row><a data-property="">grid-auto-rows</a><td><a class=production data-link-type=type href=#typedef-track-size>&lt;track-size&gt;</a><td>auto<td><td>no<td>see <a href=#track-sizing>Track Sizing</a><td>visual<td><a href=#grid-container>grid containers</a><td>see <a href=#track-sizing>Track Sizing</a><td>
 <tr><th scope=row><a data-property="">grid-auto-flow</a><td>none | [ [ rows | columns ] &amp;&amp; dense? ]<td>rows<td><td>no<td>n/a<td>visual<td><a href=#grid-container>grid containers</a><td>specified value<td>
+<tr><th scope=row><a data-property="">grid-auto-position</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a> / <a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>1 / 1<td><td>no<td>na/<td>visual<td><a href=#grid-container>grid containers</a><td>specified value<td>
 <tr><th scope=row><a data-property="">grid-auto</a><td><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> ]? ]<td>see individual properties<td><td>see individual properties<td>see individual properties<td>visual<td><a href=#grid-container>grid containers</a><td>see individual properties<td>
 <tr><th scope=row><a data-property="">grid-row-start</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>auto<td><td>no<td>n/a<td>visual<td><a href=#grid-item>grid items</a><td>specified value (almost)<td>
 <tr><th scope=row><a data-property="">grid-column-start</a><td><a class=production data-link-type=type href=#typedef-grid-line>&lt;grid-line&gt;</a><td>auto<td><td>no<td>n/a<td>visual<td><a href=#grid-item>grid items</a><td>specified value (almost)<td>

css-grid/Overview.src.html

@@ -15,7 +15,7 @@ <h1>CSS Grid Layout Module Level 1</h1>
 Previous editors: <a href="mailto:pcupp@microsoft.com">Phil Cupp</a>, Microsoft Corporation
 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>
 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.
-Ignored Terms: column-*, justify-*, containing block, grid-field, <positive-integer>, <ident>, auto, grid-auto-position
+Ignored Terms: column-*, justify-*, containing block, grid-field, <positive-integer>, <ident>, auto
 Link Defaults: css21 (property) margin, css-align-3 (dfn) alignment container/alignment subject
 </pre>
 
@@ -1412,7 +1412,7 @@ <h3 id="grid-auto-flow-property">
 	</pre>
 
 	<p>
-		<a>Grid items</a> that aren't explicitly placed are are automatically placed into an unoccupied space in the <a>grid container</a>.
+		<a>Grid items</a> that aren't explicitly placed are automatically placed into an unoccupied space in the <a>grid container</a>.
 		The 'grid-auto-flow' property controls the direction in which the search for unoccupied space takes place, 
 		and whether rows or columns are added as needed to accommodate the content.
 
@@ -1595,6 +1595,32 @@ <h4 id='auto-placement-algo'>
 	<p class='issue'>
 		Edit the algorithm to allow for dense packing.
 
+<h3 id="grid-auto-position-property">
+Automatic Placement: the 'grid-auto-position' property</h3>
+
+	<pre class='propdef'>
+	Name: grid-auto-position
+	Value: <<grid-line>> / <<grid-line>>
+	Initial: 1 / 1
+	Applies to: <a>grid containers</a>
+	Inherited: no
+	Percentages: na/
+	Media: visual
+	Computed value: specified value
+	</pre>
+
+	If a <a>grid container</a> doesn't specify an automatic-placement strategy through 'grid-auto-flow',
+	any grid items with an <a>automatic grid position</a> are instead all placed at the default position
+	specified by 'grid-auto-position'.
+
+	Interpret the two <<grid-line>>s as if they were specified in 'grid-column-start' and 'grid-row-start', respectively,
+	of a hypothetical <a>grid item</a>,
+	treating ''auto'' as ''1'' for this purpose.
+	The resulting lines of the <a>grid container</a>
+	become a <a>definite grid position</a> in both axises
+	for the auto-placed <a>grid items</a>.
+
+
 <h3 id='implicit-grid-shorthand'>
 Implicit Grid Shorthand: the 'grid-auto' property</h3>