automatic row spanning in css grid

Question

Is there a way to get automatic row spanning (item occupies automatic number of vertical grid cells)?

In my example, I'd like cell 8 to span 2 (or more) cells automatically, without having to explicitly say span 2. I've been looking high and low how to do this, but it doesn't seem possible.

I'd like to have each cell a multiple of, say 100px, so that the smallest cell is 100px, if the content overflows it becomes 200px tall, and with more content 300px, etc.

In other words I'm hoping there is a way the css grid can determine XX automatically:

.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

No, this is not currently possible with CSS grid. You’ll have to continue use the span keyword.

You may have to use JavaScript to detect long content and dynamically add a class to the grid items that have more content.