CSS-сетка: одна строка не влияет на ширину столбца, что приводит к переносу ⇐ CSS

[Anonymous]

Я хочу, чтобы каждая «ячейка» в моей сетке вносила вклад в ширину столбца, за исключением определенной — я хочу, чтобы она увеличивала свою высоту, чтобы вместить ее (принудительно перенося слова). Есть ли способ сделать это?

Код: Выделить всё

body{
display:flex;
}

.grid-container{
display: grid;
gap: 20px;
grid-template-columns: auto auto auto;
&>div{
display: grid;
grid-column-start:1;
grid-column-end:4;
grid-template-columns:subgrid;
}
.see-all{
:nth-child(1){
column:1;
}
:nth-child(2){
column:2;
}
:nth-child(3){
column:3;
}
}
.other{
grid-columns: span 3;
}
}

Код: Выделить всё

Apple
Banana
Coconut


Date
Eggplant
Fig


This row is just too long, I want to force the elements in this row to word wrap and not contribute to the grid
Banana Split
Cookie Sandwich

Подробнее здесь: https://stackoverflow.com/questions/786 ... ng-in-wrap