title: Background gradient spanning multiple CSS grid areas
body: <p>I have the following grid layout:</p>
  
  <pre><code> *       *   *       *
  *********** ***********
   * Area1 *   * Area2 *
  *********** ***********
   *       *   *       *
  </code></pre>
  
  <p>Both Area1 and Area2 are div elements. I want to add a background gradient spanning both Area1 and Area2. Is this possible?</p>
  
  <p>I can surround them with another element spanning both Area1 and Area2, but then I can't place the children inside this grid layout.</p>
  
  <p>I'm looking for a way to style multiple grid areas without nesting elements.</p>