[css3-layout] Added 'position: grid' (and 'display: grid' as its

abbreviation) for switching between 'flow' and 'grid-area'.

Author: bert-github

css-template/Overview.src.html

@@ -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.
 
@@ -2156,19 +2138,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 'displa' 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 +2223,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 +2234,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 +2250,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 +2269,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