title: Position deeply nested elements in a higher level grid container
body: <p>All guides about CSS grid seem to imply a structure where the elements positioned in a grid are direct children of the grid element itself:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div&gt;A&lt;/div&gt;
    &lt;div&gt;B&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Where <code>.wrapper</code> has <code>display: grid</code> and a definition of the <em>grid</em> properties.</p>
  <p>Does it make any sense if I want to position a element that is a &quot;grandchild&quot; of the grid, on the grid itself (instead of relying on its parent?)</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;wrapper&quot;&gt;
    &lt;div&gt;A&lt;/div&gt;
    &lt;div&gt;
      &lt;div&gt;B&lt;/div&gt;
      &lt;div&gt;C&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to place <code>A</code>, <code>B</code> &amp; <code>C</code> each on their own row of the grid; would that even make sense?</p>