10

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

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

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

换句话说，我希望有一种方法可以让 CSS 网格自动确定 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;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div class="i">8aslkdj ljsa lkj dasljdks lajsld jlasdl sldjslda ld jla8aslkdj ljsa lkj dasljdks lajsld jlasdl sldjslda ld jla8aslkdj ljsa lkj dasljdks lajsld jlasdl sldjslda ld jla8aslkdj ljsa lkj dasljdks lajsld jlasdl sldjslda ld jla</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
</div>

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

4

1 回答 1

7

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

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

于 2017-04-18T15:13:33.420 回答