[css3-layout] When 'position' is 'grid', the computed value of

'display' is always 'block', rather than computed as for 'absolute'.

Author: bert-github

css-template/Overview.src.html

@@ -1754,8 +1754,7 @@ <h2 id=flow>Flowing content into slots: 'flow'</h2>
 <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
@@ -2174,7 +2173,7 @@ <h3>Taking elements out of the flow with 'position: grid' or 'display: grid'</h3
 <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 'displa' to 'block'. If the element does not have a grid
+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.
 
@@ -2379,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.
@@ -2423,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
@@ -2466,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>
@@ -3987,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
@@ -4304,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),
@@ -4347,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