Q:

Background gradient spanning multiple CSS grid areas

I have the following grid layout:
 *       *   *       *
*********** ***********
 * Area1 *   * Area2 *
*********** ***********
 *       *   *       *

Both Area1 and Area2 are div elements. I want to add a background gradient spanning both Area1 and Area2. Is this possible?
I can surround them with another element spanning both Area1 and Area2, but then I can't place the children inside this grid layout.
I'm looking for a way to style multiple grid areas without nesting elements.

A:

No...CSS Grid areas are not DOM elements and so cannot be selected or styled by CSS
However, with CSS Grid, source order is not relevant and elements can be in the same "space" and layered using z-index without using positioning.
As such, a "styling div" (shudder) spanning the areas is possible.

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr 1fr;
  grid-gap: 1em;
  width: 80%;
  margin: auto;
  border: 1px solid red;
}

.container div {
  height: 175px;
  border: 1px solid grey;
  font-size: 2em;
  color:white;
}

.one {
  grid-row: 1;
  grid-column: 2/3;
}

.two {
  grid-row: 1;
  grid-column: 3/4;
}

.gradient {
  grid-column: 2/4;
  grid-row: 1;
  background: linear-gradient(to right, green, blue);
  z-index: -1;
}
<div class="container">
  <div class="one">Div 1</div>
  <div class="two">Div 2</div>
  <div class="gradient"></div>
</div>

