css网格中的自动行跨越

2023年2月27日 238次阅读

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

在我的例子中,我希望单元格8自动跨越2个(或更多)单元格,而不必明确说明跨度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

最佳答案 不,CSS网格目前无法实现这一点.您必须继续使用span关键字.

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

点赞