title: CSS Grid Elements Positioning on Window Resize
body: <blockquote>
    <p>I have <strong>4</strong> divs, which on <strong>medium</strong> size windows look as bellow:</p>
  </blockquote>
  
  <pre><code> ------------   ------------
  | top-left    |  top right   |
   ------------   ------------
  | bottom left |  bottom right|
   ------------   ------------
  </code></pre>
  
  <blockquote>
    <p>Given the code snippet attached, on <strong>small</strong> devices, the following
    positioning occurs:</p>
  </blockquote>
  
  <pre><code> -------------  
  | top-left    |  
   -------------   
  | bottom left |  
   -------------   
  | top-right   |  
   -------------   
  | bottom right|  
   -------------  
  </code></pre>
  
  <blockquote>
    <p>My desired positioning is:</p>
  </blockquote>
  
  <pre><code> -------------  
  | top-left    |  
   -------------   
  | top-right   |  
   -------------   
  | bottom left |  
   -------------   
  | bottom right|  
   -------------  
  </code></pre>
  
  <p><strong>I would have expected that</strong> </p>
  
  <pre><code>  grid-template-areas:
        'top-left-container'
        'top-right-container'
        'bottom-left-container'
        'bottom-right-container';
  </code></pre>
  
  <p><strong>would fulfill this, but it doesn't. 
  Any ideas why and how can this be achieved?</strong>
  <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>@media (min-width: 768px) {
    .container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto auto;
      grid-column-gap: 50px;
      grid-template-areas:
        'top-left-container top-right-container'
        'bottom-left-container bottom-right-container';
    }
  }
  
  @media (max-width: 768px) {
    .container {
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
      grid-template-areas:
        'top-left-container'
        'top-right-container'
        'bottom-left-container'
        'bottom-right-container';
    }
  }
  .left {
    border: 3px solid gray;
  }
  
  .right {
    border: 3px solid gray;
  }
  
  .top-left {
    background: yellow;
    grid-area: top-left-container;
    height: 100px;
  }
  
  .top-right {
    background: yellow;
    grid-area: top-right-container;
    height: 100px;
  }
  
  .bottom-left {
    background: red;
    grid-area: bottom-left-container;
  }
  
  .bottom-right {
    background: red;
    grid-area: bottom-right-container;
    align-self: end;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="left"&gt;
      &lt;div class="top-left"&gt;
        Top left
      &lt;/div&gt;
      &lt;div class="bottom-left"&gt;
        Bottom left
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="right"&gt;
      &lt;div class="top-right"&gt;
        Top right
      &lt;/div&gt;
      &lt;div class="bottom-right"&gt;
        Bottom right
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>