Есть ли способ получить автоматическое объединение строк (элемент занимает автоматическое количество вертикальных ячеек сетки)?
В моем примере я бы хотел, чтобы ячейка 8 автоматически занимала 2 (или более) ячейки, без необходимости явно указывать span 2. Я долго искал, как это сделать, но это не кажется возможным.
Я хотел бы, чтобы каждая ячейка была кратной, скажем, 100 пикселей, чтобы самая маленькая ячейка была 100 пикселей, если содержимое переполняется, она становится высотой 200 пикселей, а с большим содержанием - 300 пикселей и т. Д.
Другими словами, я надеюсь, что есть способ, которым 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>