避免具有相同网格区域的元素重叠

Question

如果有一个黑客可以在堆栈中启用具有相同网格面积attr的渲染元素，那就太好了。我知道css-grid的默认功能是将它们重叠，我只是在寻找一种技巧。

例如：

animation-duration

我正在寻找以下解决方案：
 1.不会使用嵌套。即将所有段落包装到另一个div中，并将该div指向网格区域
 2.不会增加网格面积行，也不需要将每个元素都指向新的网格面积

这有可能吗？

此处的示例： https://codepen.io/stavros-liaskos/pen/WPdLoJ?editors=1100

Answer 1

我在这里更改了您的代码，可能会帮助您完成操作

Codepen

.grid {
  display: grid;
  grid-template-columns:  1fr,1fr;
}

.header {
  grid-column: 1/4;
  background: red;
}

.paragraph {
  grid-column: 1/3;
  background: yellow;
}

.slider {
  grid-column: 3/4;
  background: gray;
}

.footer {
  grid-column: 1/4;
  background: green;
}