title: Css-grid: Bleed background outside container
body: <p>Consider the following 3-column grid layout with max-width constraint on container:</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>.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 56px minmax(56px, auto) 56px;
    max-width: 300px;
    margin: auto;
  }
  
  header {
    background-color: grey;
    grid-column: 1 / span 3;
    grid-row: 1 / 2;
  }
  
  main {
    background-color: #2E64FE;
    grid-column: 1 / span 2;
    grid-row: 2 / 3;
  }
  
  aside {
    background-color: #FF0040;
    grid-column: 3 / span 1;
    grid-row: 2 / 3;
  }
  
  footer {
    background-color: grey;
    grid-column: 1 / span 3;
    grid-row: 3 / 4;
  }
  
  header, main, aside, footer {
    line-height: 56px;
    text-align: center;
    vertical-align: middle;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;body&gt;
      &lt;div class='container'&gt;
        &lt;header&gt;Header&lt;/header&gt;
        &lt;main&gt;Main&lt;/main&gt;
        &lt;aside&gt;Sidebar&lt;/aside&gt;
        &lt;footer&gt;Footer &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ideally, I would like to bleed background of header and footer outside the container when viewport width is above max-width, but keep grid and its structure within max-width as in example (<em>including</em> inner content of header and footer).</p>
  
  <p>I have considered these approaches:</p>
  
  <ul>
  <li>Forget max-width container, use full width container with minmax'es and position full-span divs with background-color underneath header and footer(<a href="https://codepen.io/anon/pen/OaryXj" rel="nofollow noreferrer">https://codepen.io/anon/pen/OaryXj</a>). I don't like this approach because it adds extra elements purely for styling and because it adds two extra columns (I can live with this one probably, using named columns)</li>
  <li>Use same approach as above, but instead of adding extra divs, use full-span header and footer with "padding: 0 calc((100% - 900px)/2);" (<a href="https://codepen.io/anon/pen/BGvoxx" rel="nofollow noreferrer">https://codepen.io/anon/pen/BGvoxx</a>). I don't like this approach either, because I don't understand why it works at all when 100% &lt; 900px (why negative padding is not added) and it adds two extra columns to the grid as well.</li>
  </ul>
  
  <p>Any other ideas? Some calc() magic with negative margins and padding on header / footer?</p>