跨越多个CSS网格区域的背景渐变

Question

我有以下网格布局：

 *       *   *       *
*********** ***********
 * Area1 *   * Area2 *
*********** ***********
 *       *   *       *

Area1和Area2都是div元素。我想添加一个跨越Area1和Area2的背景渐变。这可能吗？

我可以用另一个跨越Area1和Area2的元素包围它们，但是我不能将这些子元素放在这个网格布局中。

我正在寻找一种方法来设置多个网格区域，而不需要嵌套元素。

Answer 1

否... CSS网格区域不是DOM元素，因此无法通过CSS选择或设置样式

但是，使用CSS Grid时，源顺序不相关，并且元素可以位于相同的“空格”中，并使用z-index 使用定位进行分层。

因此，跨越这些区域的“造型div”（颤抖）是可能的。

.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>