title: CSS Grid layout with gutters
body: <p>I need a layout like so:</p>
  
  <p><a href="https://i.stack.imgur.com/O5rLZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O5rLZ.jpg" alt="enter image description here"></a></p>
  
  <p>Here is my try:</p>
  
  <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>:root {
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  .grid-container {
    display: grid;
    grid-template-columns:
      [full-start] minmax(0, 1fr)
      [main-start] minmax(0, 55.625em) [main-end]
      minmax(0, 1fr) [full-end];
  }
  
  .grid-container &gt; * {
    grid-column: full-start / full-end;
  }
  
  .header {
    background: #0e9daf;
  }
  
  .main {
    background: #9E9E9E;
    grid-column: main-start;
  }
  
  .sidebar {
    background: #dd9f32;
  }
  
  .footer {
    background: #9b51e0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="gridlayout.css"&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="grid-container"&gt;
      &lt;header class="header"&gt;
        Header
      &lt;/header&gt;
  
      &lt;main class="main"&gt;
        Main
      &lt;/main&gt;
  
      &lt;aside class="sidebar"&gt;
        Sidebar
      &lt;/aside&gt;
  
      &lt;footer class="footer"&gt;
        Footer
      &lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If the screen is wider, let's say a 1080p screen, the main content has gutters on the left and right side, but the header and footer extends the full page. </p>
  
  <p>Think about something like this, but I'm achieving it with grid:</p>
  
  <pre><code>  .main {
       max-width: 800px;
       margin: 0 auto;
    }
  </code></pre>
  
  <p>On larger displays, I would like to split the main area in two portions, I need a content area (a list of all blog posts) and a sidebar on the right with widgets such as "recent posts", "search bar", etc). I need some gap (not much) between the content and sidebar.</p>
  
  <p>On small screens, I would like the header first, the blog posts below the header, the widgets below the blog posts, and the footer last.</p>
  
  <p>I'm not even sure if I approached this the right way. I would love to hear your opinions. Thank you.</p>