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;
.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>
The min-width:100%; width:0
trick will do in your case. The grid track sizes are calculated based on its width
, then its size will be grown back based on the size of the track because of min-width
.
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;
}
.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>