title: Can the CSS Grid Allignment be controlled by a child React components?
body: <p>I have a react project structured in the typical dashboard layout in CSS Grid. The primary work area, where React components are constantly being loaded/unloaded, is just a single Grid Cell. My problem is that depending on the work component, I may want to align it <code>center</code> or top center (I believe this is the <code>start</code> alignment). I try to set the <code>align-self</code> value i want in the work components <code>div</code> (<code>Comp1</code>) but it does not have any effect. It only seems to work if the <code>div</code> that is mapped to the cell grid (<code>Container-work</code> is altered.</p>
  <ul>
  <li>Can and should <code>Comp1</code> control its Cell Grid alignment?</li>
  <li>Is there a better way to pass this control to components using React? (IE: <code>Container</code> is the parent component and <code>Comp1</code> is the child component, how do I write <code>Container</code> and <code>Comp1</code> to allow this behavior)</li>
  </ul>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Container-Top {
    color: white;
    background-color: black;
    display: grid;
    text-align: center;
    grid-template-columns: 200px minmax(200px, 1fr);
    grid-template-rows: 100px 1fr;
    row-gap: 20px;
  }
  
  .Container-Logo {
    grid-column-start: 1;
    grid-row-start: 1;
    background-color: blue;
  }
  
  .Container-SideNav {
    grid-column-start: 1;
    grid-row-start: 2;
    background-color: green;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    list-style-type: none;
  }
  
  .Container-TopNav {
    grid-column-start: 2;
    grid-row-start: 1;
    background-color: gray;
    display: grid;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    list-style-type: none;
  }
  
  .Container-Work {
    grid-column-start: 2;
    grid-row-start: 2;
  }
  
  .Comp1 {
    align-self: end;
    /*does nothing */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="Container-Top"&gt;
    &lt;div class="Container-SideNav"&gt;
      &lt;ul&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="Container-TopNav"&gt;
      &lt;ul&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
        &lt;l1&gt;Work&lt;/l1&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="Container-Logo"&gt;
      &lt;h1&gt;
        logo
      &lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="Container-Work"&gt;
      &lt;!-- React is going to add elements here 
          I may want them aligned in different ways--&gt;
      &lt;div class="Comp1"&gt;
        &lt;h3&gt;
          How can I change the alignment of Comp1?
        &lt;/h3&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <h2>Update #1</h2>
  <p>The React Code for `Container component looks something like this:</p>
  <pre><code>function Container() {
    return (
      &lt;div className=&quot;Container-Top&quot;&gt;
          &lt;img src={logo} className=&quot;Cotnainer-Logo&quot; alt=&quot;logo&quot; /&gt;
          &lt;Router&gt;
          &lt;div className=&quot;Container-SideNav&quot;&gt;
            &lt;ul&gt;
              &lt;li&gt;
                &lt;Link to=&quot;/comp1&quot;&gt;Comp1&lt;/Link&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
           
          &lt;/div&gt;
          &lt;div className=&quot;Container-Work&quot;&gt;
            &lt;Switch&gt;
              &lt;Route path=&quot;/comp1/:serialnum&quot;&gt;
                &lt;Comp1 /&gt;
              &lt;/Route&gt;
            &lt;/Switch&gt;
            &lt;/div&gt;
            &lt;/Router&gt;   
    &lt;/div&gt;
    );
  }
  </code></pre>
  <h2>Update #2</h2>
  <p>I also use <code>grid</code> in <code>Comp1</code> to continue the grid layout. Ideally I can only use <code>grid</code> so I can just focus on learning it, but if I need to use flex, please include a way to make the nested-grid layout work.</p>
  <h2>Update #3</h2>
  <p>The root issue seems to be that only direct children can be grid items:</p>
  <blockquote>
  <p>When you add display: grid to a grid container, only the direct children become grid items and can then be placed on the grid that you have created. The children of these items display in normal flow. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid#introduction_to_subgrid" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid#introduction_to_subgrid</a></p>
  </blockquote>