Question

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

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

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

换句话说，我希望css网格可以自动确定XX：

.i {  grid-row: span XX; }

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

不，CSS网格目前无法实现。您必须继续使用span关键字。

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

css网格中的自动行跨越

1 个答案: