title: Responsive design with CSS Grids
body: <p>I'd like to have responsive version to this code.</p>
  
  <pre><code>body {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-areas: 
          "navigation-bar content content content";
      margin: 0; padding: 0;
  }
  
  .navigation-bar {
      grid-area: navigation-bar;
      height: 100vh;
      background-color: #1a1b20;
  }
  
  .content {
      grid-area: content;
      background-color: #202127;
  }
  
  &lt;body&gt;
      &lt;div class="navigation-bar"&gt;&lt;/div&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What I have:</p>
  
  <pre><code>@media only screen and (max-width: 600px) {
      body {
      }
  
      .navigation-bar {
      }
  
      .content {
      }
  }
  </code></pre>
  
  <p>I'd like to have <code>navigation-bar</code> on the top of the website and <code>content</code> below it.</p>
  
  <p>It means:</p>
  
  <ol>
  <li><code>grid-template-columns</code> should be <code>1fr</code></li>
  <li>height of <code>navigation-bar</code> should be about 25vh</li>
  </ol>
  
  <p>But I don't know, what <code>grid-template-rows</code> should be.</p>
  
  <p>It depends on <code>content</code>, but if there is no content in <code>content</code>, it should fill whole screen (<code>navigation-bar</code> and <code>content</code> is a rest).</p>
  
  <p>May you help me with responsive desige, please?</p>
  
  <p>EDIT:</p>
  
  <p>On mobile phone:</p>
  
  <p><a href="https://i.stack.imgur.com/bglSA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bglSA.png" alt="enter image description here"></a></p>