xfq
diff --git a/‎css-template/Overview.src.html‎
Lines changed: 87 additions & 10 deletions b/‎css-template/Overview.src.html‎
Lines changed: 87 additions & 10 deletions
@@ -1790,7 +1790,7 @@ <h3 id=flow>Flowing content into slots: 'flow'</h3>
 <p>The name of the slot may be quoted (<var>&lt;string&gt;</var>) or
 unquoted (<var>&lt;identifier&gt;</var>), but if the name is equal to
 one of the following, it <em>must</em> be quoted: ''initial'',
-''inherit'', ''default'', ''same'', or ''next''. This is to avoid
+''inherit'', ''default'' or ''same''. This is to avoid
 ambiguity with the keywords of the same name.
 
 <div class=example>
@@ -2152,7 +2152,7 @@ <h3 id=flow>Flowing content into slots: 'flow'</h3>
 
 <!--=================================================================-->
 
-<h3>Stacking elements on top of a grid: 'grid-area'</h3>
+<h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 
 <table class=propdef>
 <tbody>
@@ -2174,6 +2174,23 @@ <h3>Stacking elements on top of a grid: 'grid-area'</h3>
 value definition">per grammar</abbr>
 </table>
 
+<table class=propdef>
+<tbody>
+<tr><th>Name: <td><dfn>grid-auto</dfn>
+<tr><th><a href="#values" >Value</a>: <td>none | rows | columns
+<tr><th>Initial: <td>none
+<tr><th>Applies to: <td>elements that have a <span>grid
+ancestor</span> and whose 'position' is equal to 'static' or
+'relative'
+<tr><th>Inherited: <td>yes
+<tr><th>Animatable: <td>no
+<tr><th>Percentages: <td>N/A
+<tr><th>Media: <td>visual
+<tr><th>Computed&nbsp;value: <td>specified value
+<tr><th>Canonical order: <td><abbr title="follows order of property
+value definition">per grammar</abbr>
+</table>
+
 <div class=issue>
 <p>At the Aug 2012 ftf, Florian suggested a property 'collision: auto
 | collide | avoid' to switch between overlapping and not overlapping.
@@ -2223,11 +2240,11 @@ <h3>Stacking elements on top of a grid: 'grid-area'</h3>
 
 <dt>auto
 <dd>
-<p class=issue>The automatic placement algorithm: selects the next
-slot (scanning either left to right and top to bottom, or top to
-bottom and left to right, see the '??' property) that doesn't have an
-earlier element positioned with 'grid-area'. If no such slot, then add
-another row or column with anonymous slots (of what size?).
+<p>Same as 'auto 1 1'
+
+<dt>auto <var>W</var> <var>H</var>
+<dd>
+<p>The <em>automatic placement</em> algorithm, see below.
 
 <dt><var>X</var> <var>Y</var>
 <dd>
@@ -2260,7 +2277,7 @@ <h3>Stacking elements on top of a grid: 'grid-area'</h3>
 the grid line at which the nearest preceding element was positioned,
 in particular: the nearest preceding element in document order with
 the same <span>grid ancestor</span> to which 'grid-area' applied. If
-there is no such element, or if its 'grid-value' was ''none'', then
+there is no such element, or if its 'grid-area' was ''none'', then
 ''same'' stands for '1'.
 
 <p>Similarly, the keyword ''next'' stands for the next grid line after
@@ -2273,9 +2290,59 @@ <h3>Stacking elements on top of a grid: 'grid-area'</h3>
 <var>Y</var> + <var>H</var> refer to non-existent grid lines, then the
 grid is extended with as many extra rows and or columns as needed.
 
-<p class=issue>With what size?
+<p class=issue>With what size? Need to add 'grid-auto-columns' and
+'grid-auto-rows' to set the width/height of automatically added rows
+and columns.
+</dl>
+
+<p>The value of 'grid-auto' determines the <dfn>automatic
+placement</dfn> algorithm and is used if 'grid-area' is ''auto
+<var>W</var> <var>H</var>'' (including just ''auto''). The values are
+as follows:
+
+<dl>
+<dt>none
+<dd>
+<p>The element is positioned as if its 'grid-area' were '1 1
+<var>W</var> <var>H</var>'
+
+<p class=issue>This is thus not very useful. Drop this value?
+
+<dt>rows
+<dd>
+<p>The element is positioned as high as possible in the grid (and if
+there are multiple solutions at the same height: as far to the left as
+possible) such that is doesn't overlap with any earlier elements in
+the document that have the same <em>grid ancestor</em> and 'grid-area'
+other then ''none''. More precisely: the element is placed as for
+'grid-area: <var>x</var> <var>y</var> <var>W</var> <var>H</var>, where
+<var>x</var> and <var>y</var> are chosen as follows: <span
+class=issue>Define. Tight packing (i.e., closest to top left corner)
+or preserve element order (i.e., to the right or below of previous
+element)?</span>
+
+<p>The name 'rows' comes from the fact that this algorithms tends to
+fill a row with subsequent elements and then adds new rows
+below. E.g., if all children of a grid element have 'grid-area: auto'
+and 'grid-auto: row', they will be placed one after the other on the
+same row until the row is full, and then on the next row, etc.
+
+<dt>columns
+<dd>
+<p>The element is positioned as far to the left as possible in the
+grid (and if there are multiple solutions: as high as possible) such
+that is doesn't overlap with any earlier elements in the document that
+have the same <em>grid ancestor</em> and 'grid-area' other then
+''none''. More precisely: the element is placed as for 'grid-area:
+<var>x</var> <var>y</var> <var>W</var> <var>H</var>, where
+<var>x</var> and <var>y</var> are chosen as follows: <span
+class=issue>define</span>
 </dl>
 
+<p class=issue>The pair of keywords ''same/next'' and the pair
+'grid-auto'/''auto'' do the same thing in different ways. We need only
+one. Which is easier?
+
 <p>If an elements has a 'grid-area' other than ''none'', then the
 'float' property does not apply and the values of 'display' are
 determined according to this table:
@@ -2361,10 +2428,20 @@ <h3>Stacking elements on top of a grid: 'grid-area'</h3>
 <p>with style rules like this:
 
 <pre>
-TABLE {grid-columns: auto; grid-rows: auto}
+TABLE {grid: "*"}
 TD:first-child {grid-area: next 1}
 TD {grid-area: same next}
 </pre>
+
+<div class=issue>
+<p>Or with 'grid-auto':
+
+<pre>
+TABLE {grid: "*"}
+TD {grid-area: auto; grid-auto: columns}
+TD:first-child {grid-auto: rows}
+</pre>
+</div>
 </div>
 
 <p