Make grid items overlap

css, css-grid, html

Solution

You're using the `grid-template-areas` property to arrange the layout with ASCII art.

body { 
  display: grid;
  grid-template-areas: 
    "header header header"
    "nav article ads"
    "footer footer footer";
  ...
}

This method works fine for grid areas that don't overlap.

But strings cannot overlap in the code, so this method cannot be used to overlay grid areas.

In other words, `"header header header"` and `"nav article ads"` can be above and below each other on the X and Y axes, but not the Z axis.

To make grid areas overlap you'll need another method.

CSS Grid provides line-based placement as an alternative to `grid-template-areas`.

Line-based placement means, in essence, using this following properties to determine a grid item's size and location:

- `grid-row-start`

- `grid-row-end`

- `grid-column-start`

- `grid-column-end`

and the shorthands:

- `grid-column`

- `grid-row`

body {
  display: grid;
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-gap: 10px;       /* shorthand for grid-row-gap and grid-column-gap */
  height: 100vh;
  margin: 0;
}
#pageHeader {
  grid-row: 1;          /* see notes below */
  grid-column: 1 / 4;   /* see notes below */
  background-color: crimson;
  z-index: 1;
  opacity: .5;
}
#pageFooter {
  grid-row: 3;
  grid-column: 1 / 4;
}
#mainArticle {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
}
#mainNav {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
}
#siteAds {
  grid-row: 1 / 3;
  grid-column: 3 / 4;
}
header, footer, article, nav, div {
  padding: 1.2em;
  background: gold;
}

<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

The `grid-row` and `grid-column` properties control the location and size of grid items.

- `grid-column: 1 / 4` means the grid item will span from grid column lines one to four (i.e, the item will span across the first, second and third columns)

- `grid-row: 3` means the grid item will be located on row three (from grid row line 3 to `auto`, which is applied by default when the second value is omitted.)

With this method of positioning grid items, you can easily make them overlap.

jsFiddle

Problem

Original source