Necessary containers with CSS Grid

Question

One of the main selling points of the CSS grid is that it eliminates container DIVs.

But I found a very common layout in which this doesn't appear to be true.

This page is supposed to have 4 areas: header, side, main and footer. But notice that side and main have a different background, so how is this possible to achieve with CSS grid without creating a container element for side and main, and turning the grid into header, side+main, footer?

CSS Grid lets you [overlap areas](https://stackoverflow.com/questions/45534929/overlapping-grid-items-using-grid-template-areas-named-areas). Put the background into a fifth grid cell and position it behind the side+main. — Blazemonger, Mar 08 '18 at 15:57
_“One of the main selling points of the CSS grid is that it eliminates container DIVs.”_ - is it …? — CBroe, Mar 08 '18 at 16:02

Paulie_D · Accepted Answer · 2018-03-08T17:08:05.277

You need to think of this in terms of a 4-column grid...then assign your divs to the appropriate rows & columns.

The background can be managed by a pseudo-element on the body although I prefer a page containing div. Same effect.

Codepen Demo

Nore info: Breaking Out With CSS Grid Layout

.page {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr 100px 300px 1fr;
  grid-template-rows: min-content 1fr min-content;
  grid-gap: .5em;
}

.page::before {
  content: "";
  grid-column: 1 / 5;
  grid-row: 2 / 3;
  z-index: -2;
  background: pink;
}

header {
  background: red;
  padding: 1em 0
}

footer {
  background: blue;
  padding: 1em 0;
}

aside {
  background: green;
}

main {
  background: rebeccapurple;
}

header,
footer {
  grid-column: 2 / 4;
}

aside {
  grid-column: 2 / 3;
  grid-row: 2;
}

main {
  grid-column: 3 / 4;
  grid-row: 2;
}

<div class="page">
  <header>HEADER-CONTENT</header>
  <aside></aside>
  <main></main>
  <footer>FOOTER CONTENT</footer>
</div>

In this case I substituted different widths for demo purposes...

grid-template-columns: 1fr 100px 300px 1fr;

for say

grid-template-columns: 1fr 300px 640px 1fr;

Where the total of 300px + 640px equates to your 940px "container" width. These can be adjusted as you prefer.

Necessary containers with CSS Grid

1 Answers1