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

Question

我有以下网格布局：

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

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

我可以用跨越 Area1 和 Area2 的另一个元素围绕它们，但是我无法将子项放置在此网格布局中。

我正在寻找一种无需嵌套元素即可设置多个网格区域样式的方法。

Answer 1

否...CSS 网格区域不是 DOM 元素，因此 CSS

无法选择或设置样式

但是，对于 CSS 网格，源顺序无关紧要，元素可以在相同的 "space" 中并使用 z-index 分层 而无需 使用定位。

因此，"styling 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>

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

Background gradient spanning multiple CSS grid areas

css

html

css-grid