css网格中的自动行跨越

Question

有没有办法获得自动行跨越（项目占用垂直网格单元的自动数量）？

在我的示例中，我希望单元格 8 自动跨越 2 个（或更多）单元格，而无需明确说span 2. 我一直在寻找如何做到这一点，但似乎不可能。

我想让每个单元格都是 100 像素的倍数，这样最小的单元格是 100 像素，如果内容溢出，它会变成 200 像素高，更多的内容是 300 像素，等等。

换句话说，我希望有一种 css 网格可以自动确定 XX 的方法：

.i {  grid-row: span XX; }

.i {  grid-row: span XX; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 2fr));
  grid-auto-flow: dense;
}

.grid div {
  border-left: 1px solid #000;
  border-top: 1px solid #000;
  padding: 10px;
}

.grid div.i {
  grid-row: span 2;
}

https://codepen.io/joe_g/pen/VbLRpN

Answer 1

不，这在 CSS 网格中目前是不可能的。您必须继续使用span关键字。

您可能必须使用 JavaScript 来检测长内容并动态地向具有更多内容的网格项添加一个类。