css - 跨越多个 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>