css 网格中的自动行跨越

Question

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

在我的示例中，我希望单元格 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

Answer 1

不，CSS 网格目前无法做到这一点。您必须继续使用 span 关键字。

您可能需要使用 JavaScript 来检测长内容，并动态添加 class 到内容较多的网格项目。

css 网格中的自动行跨越

automatic row spanning in css grid

css

css-grid