[css-grid] Redesign subgrid, per WG action item.

Author: tabatkins

css-grid/Overview.html

@@ -270,6 +270,8 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
 
        <li><a href="#resolved-track-list"><span class=secno>5.1.4. </span>
         Resolved Values</a>
+
+       <li><a href="#subgrids"><span class=secno>5.1.5. </span> Subgrids</a>
       </ul>
 
      <li><a href="#grid-template-areas-property"><span class=secno>5.2.
@@ -959,8 +961,9 @@ <h3 id=grid-containers><span class=secno>3.1. </span> Grid Containers: the
    class=css>grid</code>’</a> in the "Computed Value" column.
 
   <h3 id=subgrids-the-subgrid-display-value><span class=secno>3.2.
-   </span>Subgrids: the ‘<code class=css>subgrid</code>’ ‘<code
-   class=property>display</code>’ value</h3>
+   </span>Subgrids: the ‘<a href="#subgrid0"><code
+   class=css>subgrid</code></a>’ ‘<code class=property>display</code>’
+   value</h3>
 
   <div class=issue> This is a proposal to address the alignment of sub-items
    across grid items, so that, for example, a grid of labels + inputs (with
@@ -983,74 +986,6 @@ <h3 id=subgrids-the-subgrid-display-value><span class=secno>3.2.
    </ul>
   </div>
 
-  <p> A <a href="#grid-item"><i>grid item</i></a> can itself be a <a
-   href="#grid-container"><i>grid container</i></a> by giving it ‘<code
-   class=css>display: grid</code>’; in this case the layout of its contents
-   will be independent of the layout of the grid it participates in.
-
-  <p> In some cases it might be necessary for the contents of multiple <a
-   href="#grid-item"><i>grid items</i></a> to align to each other; in this
-   case ‘<code class=css>display: subgrid</code>’ can be used. A <a
-   href="#grid-item"><i>grid item</i></a> with ‘<code class=css>display:
-   subgrid</code>’ behaves just like one with ‘<code class=css>display:
-   grid</code>’ except that:
-
-  <ul>
-   <li> The ‘<a href="#grid-template-columns"><code
-    class=property>grid-template-columns</code></a>’ and ‘<a
-    href="#grid-template-rows"><code
-    class=property>grid-template-rows</code></a>’ properties do not apply.
-    Instead the number of explicit tracks is given by its <a
-    href="#grid-span"><i>grid span</i></a>.
-
-   <li> The <a href="#grid-span"><i>grid span</i></a> of the item is
-    determined by the number of grid rows and grid columns it contains.
-
-   <li> The <a href="#grid-placement-properties"><i>grid-placement
-    properties</i></a> are scoped to the tracks covered by the subgrid:
-    numeric indices count starting from the first line of the subgrid rather
-    than the first line of the parent grid.
-
-   <li> The subgrid's own grid items participate in the sizing of its parent
-    grid and are aligned to it. In this process, the sum of the item's
-    margin, padding, and borders are applied as an extra layer of margin to
-    the items at those edges.
-  </ul>
-
-  <div class=example>
-   <p> For example, suppose we have a form consisting of a list of inputs
-    with labels:
-
-   <pre>
-&lt;ul>
-  &lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
-  &lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
-  &lt;li>&lt;label>Phone:&lt;/label> &lt;input name=phone>
-&lt;/ul></pre>
-
-   <p> We want the labels and inputs to align, and we want to style each list
-    item with a border. This can be accomplished with subgrid layout:
-
-   <pre>
-ul {
-	display: grid;
-	grid-auto-flow: rows;
-	grid-template-columns: auto 1fr;
-}
-li {
-	display: subgrid;
-	margin: 0.5em;
-	border: solid;
-	padding: 0.5em;
-}
-label {
-	grid-column: 1;
-}
-input {
-	grid-column: 2;
-}</pre>
-  </div>
-
   <h2 id=grid-items><span class=secno>4. </span> Grid Items</h2>
 
   <p> The contents of a <a href="#grid-container"><i>grid container</i></a>
@@ -1250,7 +1185,8 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
     <tr>
      <td>Value:
 
-     <td>none | <a href="#lttrack-list"><var>&lt;track-list></var></a>
+     <td>none | <a href="#lttrack-list"><var>&lt;track-list></var></a> |
+      subgrid <a href="#ltline-names"><var>&lt;line-names></var></a>*
 
     <tr>
      <td>Initial:
@@ -1380,12 +1316,21 @@ <h3 id=track-sizing><span class=secno>5.1. </span> Track Sizing: the ‘<a
   </dl>
 
   <p> The <dfn id=grid-definition-none>none</dfn> value indicates that there
-   is no initial grid; any rows/columns will be implicitly generated, and
-   their size will be determined by the ‘<a href="#grid-auto-rows"><code
+   is no <a href="#explicit-grid"><i>explicit grid</i></a>; any rows/columns
+   will be implicitly generated, and their size will be determined by the
+   ‘<a href="#grid-auto-rows"><code
    class=property>grid-auto-rows</code></a>’ and ‘<a
    href="#grid-auto-columns"><code
    class=property>grid-auto-columns</code></a>’ properties.
 
+  <p> The <dfn id=subgrid>subgrid</dfn> value indicates that the grid will
+   align to its parent grid in that axis. Rather than specifying the sizes of
+   rows/columns explicitly, they'll be taken from the parent grid's
+   definition. If the <a href="#grid-container"><i>grid container</i></a> is
+   not a <a href="#grid-item"><i>grid item</i></a>, this value computes to
+   ‘<a href="#none"><code class=css>none</code></a>’. See the <a
+   href="#subgrids">Subgrids</a> section for more detail.
+
   <div class=example>
    <p> Given the following ‘<a href="#grid-template-columns"><code
     class=property>grid-template-columns</code></a>’ declaration:
@@ -1626,6 +1571,121 @@ <h4 id=resolved-track-list><span class=secno>5.1.4. </span> Resolved Values</h4>
    for a small list of legacy 2.1 properties. Do we really want these
    properties to return the used value here?
 
+  <h4 id=subgrids><span class=secno>5.1.5. </span> Subgrids</h4>
+
+  <p> A <a href="#grid-item"><i>grid item</i></a> can itself be a <a
+   href="#grid-container"><i>grid container</i></a> by giving it ‘<code
+   class=css>display: grid</code>’; in this case the layout of its contents
+   will be independent of the layout of the grid it participates in.
+
+  <p> In some cases it might be necessary for the contents of multiple <a
+   href="#grid-item"><i>grid items</i></a> to align to each other. A <a
+   href="#grid-container"><i>grid container</i></a> that is itself a <a
+   href="#grid-item"><i>grid item</i></a> can defer the definition of its
+   rows or columns to its parent <a href="#grid-container"><i>grid
+   container</i></a> by using the ‘<a href="#subgrid0"><code
+   class=css>subgrid</code></a>’ keyword in ‘<a
+   href="#grid-template-rows"><code
+   class=property>grid-template-rows</code></a>’ and/or ‘<a
+   href="#grid-template-columns"><code
+   class=property>grid-template-columns</code></a>’, making it a <dfn
+   id=subgrid0>subgrid</dfn> in that dimension. In this case, the <a
+   href="#grid-item"><i>grid items</i></a> of the <a
+   href="#subgrid0"><i>subgrid</i></a> participate in sizing the <a
+   href="#display-grid"><i>grid</i></a> of the parent <a
+   href="#grid-container"><i>grid container</i></a>, allowing the contents of
+   both grids to align.
+
+  <p> A <a href="#subgrid0"><i>subgrid</i></a> behaves just like a normal <a
+   href="#grid-container"><i>grid container</i></a> except that:
+
+  <ul>
+   <li> The number of explicit tracks is given by its <a
+    href="#grid-span"><i>grid span</i></a>, rather than by ‘<a
+    href="#grid-template-rows"><code
+    class=property>grid-template-rows</code></a>’/‘<a
+    href="#grid-template-columns"><code
+    class=property>grid-template-columns</code></a>’. If the <a
+    href="#grid-span"><i>grid span</i></a> is ‘<a
+    href="#track-size-auto"><code class=css>auto</code></a>’, the number of
+    tracks is determined by the size of the <a
+    href="#subgrid0"><i>subgrid</i></a>’s <i>implicit grid</i>, which is
+    defined to also be the <a href="#explicit-grid"><i>explicit grid</i></a>.
+
+   <li> The <a href="#grid-placement-properties"><i>grid-placement
+    properties</i></a> of the <a href="#subgrid0"><i>subgrid</i></a>’s <a
+    href="#grid-item"><i>grid items</i></a> are scoped to the lines covered
+    by the subgrid. E.g., numeric indices count starting from the first line
+    of the subgrid rather than the first line of the parent grid.
+
+   <li> The <a href="#subgrid0"><i>subgrid</i></a>‘<code class=css>s own
+    grid items participate in the sizing of its parent grid and are aligned
+    to it. In this process, the sum of the item</code>’s margin, padding,
+    and borders are applied as an extra layer of margin to the items at those
+    edges.
+
+   <li> The <a href="#subgrid0"><i>subgrid</i></a> is always stretched; the
+    ‘<code class=property>align-self</code>’/‘<code
+    class=property>justify-self</code>’ properties on it are ignored. Any
+    specified width/height constraints are also ignored.
+
+   <li> The <a href="#subgrid0"><i>subgrid</i></a>’s <a
+    href="#explicit-grid"><i>explicit grid</i></a> is always aligned with the
+    corresponding section of the parent <a
+    href="#display-grid"><i>grid</i></a>; the ‘<code
+    class=property>align-content</code>’/‘<code
+    class=property>justify-content</code>’ properties on it are ignored.
+
+   <li> Explicit named lines can also be specified together with the ‘<a
+    href="#subgrid0"><code class=css>subgrid</code></a>’ keyword; these
+    names apply to the corresponding lines taken from the parent <a
+    href="#display-grid"><i>grid</i></a>. If the <a
+    href="#subgrid0"><i>subgrid</i></a> has an explicit <a
+    href="#grid-span"><i>grid span</i></a>, any names for lines beyond the
+    span are ignored. If the <a href="#subgrid0"><i>subgrid</i></a> has an
+    explicit <i>grid position</i> as well as an explicit <a
+    href="#grid-span"><i>grid span</i></a>, it also automatically receives
+    the names of the lines that it covers in its parent <a
+    href="#display-grid"><i>grid</i></a>.
+  </ul>
+
+  <div class=example>
+   <p> For example, suppose we have a form consisting of a list of inputs
+    with labels:
+
+   <pre>
+&lt;ul>
+  &lt;li>&lt;label>Name:&lt;/label> &lt;input name=fn>
+  &lt;li>&lt;label>Address:&lt;/label> &lt;input name=address>
+  &lt;li>&lt;label>Phone:&lt;/label> &lt;input name=phone>
+&lt;/ul></pre>
+
+   <p> We want the labels and inputs to align, and we want to style each list
+    item with a border. This can be accomplished with subgrid layout:
+
+   <pre>
+ul {
+	display: grid;
+	grid-auto-flow: rows;
+	grid-template-columns: auto 1fr;
+}
+li {
+	display: subgrid;
+	margin: 0.5em;
+	border: solid;
+	padding: 0.5em;
+}
+label {
+	grid-column: 1;
+}
+input {
+	grid-column: 2;
+}</pre>
+  </div>
+
+  <p class=issue> Do we want to allow ‘<code class=css>repeat()</code>’
+   when specifying named lines for subgrids?
+
   <h3 id=grid-template-areas-property><span class=secno>5.2. </span> Named
    Areas: the ‘<a href="#grid-template-areas"><code
    class=property>grid-template-areas</code></a>’ property</h3>
@@ -4133,6 +4193,10 @@ <h2 class=no-num id=index> Index</h2>
       title="section 10.4."><strong>10.4.</strong></a>
     </ul>
 
+   <li>subgrid, <a href="#subgrid"
+    title="section 5.1."><strong>5.1.</strong></a>, <a href="#subgrid0"
+    title="section 5.1.5."><strong>5.1.5.</strong></a>
+
    <li>&lt;track-breadth>, <a href="#lttrack-breadth"
     title="section 5.1."><strong>5.1.</strong></a>
 
@@ -4361,7 +4425,7 @@ <h2 class=no-num id=property-index> Property index</h2>
      <th><a class=property
       href="#grid-template-columns">grid-template-columns</a>
 
-     <td>none | &lt;track-list>
+     <td>none | &lt;track-list> | subgrid &lt;line-names>*
 
      <td>none
 
@@ -4376,7 +4440,7 @@ <h2 class=no-num id=property-index> Property index</h2>
     <tr>
      <th><a class=property href="#grid-template-rows">grid-template-rows</a>
 
-     <td>none | &lt;track-list>
+     <td>none | &lt;track-list> | subgrid &lt;line-names>*
 
      <td>none