I want every “cell” in my grid to contribute to the column widths, except for a particular one – I want it to expand its height to contain (forcing a word wrap). Is there a way to do this?
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;
}
}<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">
<div>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>Banana Split</div>
<div>Cookie Sandwich</div>
</div>
</div>
<body>