xfq
diff --git a/‎css-template/Overview.src.html‎
Lines changed: 81 additions & 89 deletions b/‎css-template/Overview.src.html‎
Lines changed: 81 additions & 89 deletions
@@ -1743,25 +1743,7 @@ <h3 id=slot-sizes>Calculating the size of the grid</h3>
 
 <!--=================================================================-->
 
-<h2 id=positioning>Putting content into a grid element</h2>
-
-<p><em>This section until the next subsection is not normative.</em>
-
-<p>Grids can be used in two different ways to position content. The
-first way is to flow content into slots (either into explicit slots
-identified by name, or the default slot “*”). Each slot is an
-individual flow root (“establishes a block formatting context” in the
-terminology of CSS level 2), very much like a table cell.
-
-<p>The second way is to absolutely position elements using
-four <em>grid lines</em> to specify the positions of the four margin
-edges of the element. Like other positioned elements
-[[!CSS21]], these elements can overlap each other and the 'z-index'
-property applies to them.
-
-<!--=================================================================-->
-
-<h3 id=flow>Flowing content into slots: 'flow'</h3>
+<h2 id=flow>Flowing content into slots: 'flow'</h2>
 
 <p>The 'flow' property adds an element to a slot.
 
@@ -1772,8 +1754,7 @@ <h3 id=flow>Flowing content into slots: 'flow'</h3>
 <var>&lt;identifier&gt;</var> | <var>&lt;string&gt;</var> | '*' | same
 <tr><th>Initial: <td>auto
 <tr><th>Applies to: <td>elements that have a <span>grid
-ancestor</span> and whose 'position' is ''static'' or ''relative'' and
-whose 'grid-area' is ''none''
+ancestor</span> and whose 'position' is ''static'' or ''relative''
 <tr><th>Inherited: <td>no
 <tr><th>Animatable: <td>no
 <tr><th>Percentages: <td>N/A
@@ -2156,19 +2137,76 @@ <h3 id=flow>Flowing content into slots: 'flow'</h3>
 
 <!--=================================================================-->
 
+<h2 id=absolute>Absolute positioning on top of a grid</h2>
+
+<p><em>This section, until the next subsection, is not normative.</em>
+
+<p>A new ''grid'' value of the 'position' property allows alements to
+be taken out of their parent's flow (as with 'position: absolute' or
+'position: fixed') while still using the grid lines for alignments and
+also still contributing to the size of slots.
+
+<p>For the special case that all children of a <em>grid element</em>
+are to be positioned in this way (which is expected to be common when
+HTML and CSS are used to create <abbr title="Graphical User
+Interfaces">GUIs</abbr>), a new ''grid'' value for 'display' provides
+an abbreviation.
+
+<p>
+
+<!--=================================================================-->
+
+<h3>Taking elements out of the flow with 'position: grid' or 'display: grid'</h3>
+
+<table class=propdef-extra>
+<tbody>
+<tr><th>Name: <td><dfn>position</dfn>
+<tr><th><a href="#values" >Value</a>: <td>grid
+</table>
+
+<table class=propdef-extra>
+<tbody>
+<tr><th>Name: <td><dfn>display</dfn>
+<tr><th><a href="#values" >Value</a>: <td>grid
+</table>
+
+<p>Setting 'position: grid' on an element that has a <em>grid
+ancestor</em> causes the element to be taken out of the flow of its
+parent and positioned with 'grid-area'. It also sets the computed
+value of 'display' to 'block'. If the element does not have a grid
+ancestor, 'position: grid' is treated as if it were 'position: static'
+and 'display' is not affected.
+
+<p>Setting 'display: grid' on an element has the same effect as
+setting 'display: block'. In addition, when the element is a <em>grid
+element,</em> it sets the computed value of 'position' on its children
+to ''grid''.
+
+<div class=example>
+<p>For example, the following two style sheets are equivalent:
+<pre>
+DIV {grid: "a b c"; display: block}
+DIV > * {position: grid}
+</pre>
+
+<p>and
+<pre>
+DIV {grid: "a b c"; display: grid}
+</pre>
+</div>
+
 <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 
 <table class=propdef>
 <tbody>
 <tr><th>Name: <td><dfn>grid-area</dfn>
-<tr><th><a href="#values" >Value</a>: <td>none | auto |
+<tr><th><a href="#values" >Value</a>: <td>auto |
 <var>&lt;identifier&gt;</var> | <var>&lt;string&gt;</var> | [
 <var>&lt;integer&gt;</var> | same | next ]{2} [
 <var>&lt;integer&gt;</var>{2} ]?
 <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'
+ancestor</span> and whose 'position' is equal to 'grid'
 <tr><th>Inherited: <td>no
 <tr><th>Animatable: <td>no
 <tr><th>Percentages: <td>N/A
@@ -2184,8 +2222,7 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 <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'
+ancestor</span> and whose 'position' is equal to 'grid'
 <tr><th>Inherited: <td>yes
 <tr><th>Animatable: <td>no
 <tr><th>Percentages: <td>N/A
@@ -2196,18 +2233,6 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 </table>
 
 <div class=issue>
-<p>In [[CSS3-GRID-LAYOUT]] (version of April 2013) there is no
-'grid-area: none' but 'grid-area' only applies when 'position' is set
-to 'grid' (a new keyword).
-
-<p>There was also discussion (at the June 2013 ftf) to set a property
-on the grid element itself to enable positioning of descendants. When
-set (e.g., 'grid-mode: absolute'), all children are placed by means of
-their 'grid-area' property, when not set ('grid-mode: normal'),
-'grid-area' is ignored. That would preclude mixing flowing and
-positioned descendants (except, perhaps, if it is an inherited
-property and descendants can override it).
-
 <p>At the Aug 2012 ftf, Florian suggested a property 'collision: auto
 | collide | avoid' to switch between overlapping and not overlapping.
 (It would avoid collisions for absolutely positioned elements as
@@ -2224,19 +2249,13 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 'grid-area' may be easier to learn.
 </div>
 
-<p>The 'grid-area' property can take an element out of the flow and
-position it relative to a grid. Unless the value of 'grid-area' is
-''none'', the 'z-index' property applies and determines the 
-stacking level. If the element has no <span>grid ancestor,</span> the
-element is positioned as if the value were ''none''. The values have
-the following meanings:
+<p>The 'grid-area' property positions an element relative to a grid.
+If the property applies, the 'z-index' property determines the
+stacking level.
 
-<dl>
-<dt>none
-<dd>
-<p>The element is positioned according to its 'flow'
-property.
+<p>The values have the following meanings:
 
+<dl>
 <dt><var>&lt;identifier&gt;</var>
 <dt><var>&lt;string&gt;</var>
 <dd>
@@ -2249,11 +2268,9 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 ''default'', ''same'', or ''next''. This is to avoid ambiguity with
 the keywords of the same name.
 
-<p>If the name refers to a non-existent slot, the value is interpreted
-as if it were ''none''.
-
-<p class=issue>See the <a href="#non-existent-slot">issue about
-non-existent slot names</a> under 'flow' for other possibilities.
+<p>If the name refers to a non-existent slot, <span
+class=issue>[define (see the <a href="#non-existent-slot">issue about
+non-existent slot names</a> under 'flow' for possibilities).</span>
 <dt>
 
 <dt>auto
@@ -2361,41 +2378,16 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 '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:
-
-<table class=equiv-table>
-<thead>
-<tr>
-<th>Specified value <th>Computed value
-<tbody>
-<tr>
-<td>inline-table <td>table
-<tr>
 <td>inline, table-row-group, table-column, table-column-group,
-table-header-group, table-footer-group, table-row, table-cell,
-table-caption, inline-block, run-in, compact, ruby, ruby-base,
-ruby-text, ruby-base-group, ruby-text-group <td>block
-<tr>
-<td>inline-flex <td>flex
-<tr>
-<td>others <td>same as specified
-</table>
-
-<p class=note>Note that “others” includes ''list-item'', ''table'',
-''container' ''flex'' and of course ''none''.
-
-<p class=issue>Check that the list above covers everything in
-[[CSS3BOX]].
+<p>If 'grid-area' applies, then the 'float' property does not apply
+and the computed value of 'display' is ''block''.
 
 <div class=example>
 <p>For example, these rules
 
 <pre>
 DIV {grid: "a b"
            "c d"}
-P {position: absolute; grid-area: b}
+P {position: grid; grid-area: b}
 </pre>
 
 <p>means that any P exactly overlaps slot b.
@@ -2405,8 +2397,8 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 <p>For example, this document fragment
 <pre>
 &lt;DIV STYLE="grid: 'a b b'"&gt;
- &lt;P STYLE="grid-area: a"&gt;...
- &lt;P STYLE="grid-area: next same"&gt;...
+ &lt;P STYLE="position: grid; grid-area: a"&gt;...
+ &lt;P STYLE="position: grid; grid-area: next same"&gt;...
 &lt;/DIV&gt;
 </pre>
 <p>puts the second P in the left half of slot b, because the first P
@@ -2448,15 +2440,15 @@ <h3>Stacking elements on top of a grid: 'grid-area' and 'grid-auto'</h3>
 <pre>
 TABLE {grid: "*"}
 TD:first-child {grid-area: next 1}
-TD {grid-area: same next}
+TD {position: grid; grid-area: same next}
 </pre>
 
 <div class=issue>
 <p>Or with 'grid-auto':
 
 <pre>
 TABLE {grid: "*"}
-TD {grid-area: auto; grid-auto: columns}
+TD {position: grid; grid-area: auto; grid-auto: columns}
 TD:first-child {grid-auto: rows}
 </pre>
 </div>
@@ -3969,7 +3961,7 @@ <h4 id=auto-add>Automatically add rows and columns</h4>
 <pre>
 TABLE {grid-columns: auto; grid-rows: auto}
 TD:first-child {grid-area: next 1}
-TD {grid-area: same next}
+TD {position: grid; grid-area: same next}
 </pre>
 
 <p>This uses keywords instead of numbers, as described in <a
@@ -4286,7 +4278,7 @@ <h4>Use the pseudo-class to create additional slots</h4>
 to an element in the document you could create a pseudo-element that
 is like an “absolutely positioned slot:”
 
-<pre>DIV::slot(z) {position: absolute; grid-area: 2 2}</pre>
+<pre>DIV::slot(z) {position: grid; grid-area: 2 2}</pre>
 
 <p>Like other '::slot()' pseudo-elements, it applies to <span>grid
 elements</span> only (the DIV in this example must be a grid element),
@@ -4329,7 +4321,7 @@ <h4>Names for edges</h4>
 /* Create a 7x2 grid template */
 DIV {grid-columns: * a-line * * b-line * *; grid-rows: * *}
 /* Put H2 at cell x=4, y=2 */
-DIV H2 {position: absolute; grid-area: b-line 2}
+DIV H2 {position: grid; grid-area: b-line 2}
 </pre>
 
 <p>(This could also use strings instead of identifiers, for even more