我希望网格中的每个“单元格”都对列宽有所贡献，除了特定的一个 - 我希望它扩展其高度以包含（强制自动换行）。有办法做到这一点吗？
body{
display:flex;
}
.grid-container{
display: grid;
gap: 20px;
grid-template-columns: auto auto auto;
.see-all{
display: grid;
grid-column-start:1;
grid-column-end:4;
grid-template-columns:subgrid;
:nth-child(1){
column:1;
}
:nth-child(2){
column:2;
}
:nth-child(3){
column:3;
}
}
.other{
grid-column: 1 / span 3;
}
}<body>
<div class="grid-container">
<div class="see-all">
<div>Apple</div>
<div>Banana</div>
<div>Coconut</div>
</div>
<div class="see-all">
<div>Date</div>
<div>Eggplant</div>
<div>Fig</div>
</div>
<div class="other">
This row is just too long, I was this to use the width of the column (set by other elements) to then cause this to word wrap.
</div>
</div>
<body>min-width:100%; width:0widthmin-widthbody {
display: flex;
}
.grid-container {
display: grid;
gap: 20px;
grid-template-columns: auto auto auto;
.see-all {
display: grid;
grid-column-start: 1;
grid-column-end: 4;
grid-template-columns: subgrid;
:nth-child(1) {
column: 1;
}
:nth-child(2) {
column: 2;
}
:nth-child(3) {
column: 3;
}
}
.other {
grid-column: 1 / span 3;
}
.long-cell {
min-width: 100%;
width: 0;
}
}<body>
<div class="grid-container">
<div class="see-all">
<div>Apple</div>
<div>Banana</div>
<div>Coconut</div>
</div>
<div class="see-all">
<div>Date</div>
<div>Eggplant</div>
<div>Fig</div>
</div>
<div class="other long-cell">
This row is just too long, I want to force the elements in this row to word wrap and not contribute to the grid
</div>
</div>
<body>