In a grid layout with two columns I have several rows with similar content, while the last row has in its first cell a lengthier text.
I use display: inline-grid
and grid-template-columns: auto auto
for the container to minimize its width without linebreaks/soft wraps for the short texts in the regular columns (min-content
won't do). But I do want soft wraps for the text in the last row so it won't be the one which sets the width of the row and container.
.grid-container {
display: inline-grid;
grid-template-columns: auto auto;
grid-gap: 3px;
border: 1px solid darkcyan;
}
.cell1 {
text-align: right;
background-color: rgba(0, 0, 0, 0.35);
}
.cell2 {
text-align: left;
}
.cell1-special {
grid-column: 1 /span 1;
align-self: left;
background-color: rgba(128, 0, 0, 0.35);
}
<div class="grid-container">
<div class="cell1">total number N=</div>
<div class="cell2">100 ... 200</div>
<div class="cell1">repeat number M=</div>
<div class="cell2">1 or 2</div>
<div class="cell1">rate r=</div>
<div class="cell2">0.1-0.2</div>
<div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="cell2"></div>
</div>
Is it possible, using just css, to prevent the cell in the last row to set the width of its column? I expect the simple answer is no, but I'm thinking that maybe there's a creative solution based on restructuring the grid, adding a subgrid, an empty column, some smart use of css functions, etc.
Since the cell texts are server-generated, I can't have a static measure of the texts, but I can rearrange the data any way I need to. So I don't think a solution based on a fixed size would be acceptable, like grid-template-columns: fit-content(130px) auto;
, but at least the snippet below illustrates exactly what I am looking for:
.grid-container {
display: inline-grid;
grid-template-columns: fit-content(120px) auto;
grid-gap: 3px;
border: 1px solid darkcyan;
}
.cell1 {
text-align: right;
background-color: rgba(0, 0, 0, 0.35);
}
.cell2 {
text-align: left;
}
.cell1-special {
grid-column: 1 /span 1;
align-self: left;
background-color: rgba(128, 0, 0, 0.35);
}
<div class="grid-container">
<div class="cell1">total number N=</div>
<div class="cell2">100 ... 200</div>
<div class="cell1">repeat number M=</div>
<div class="cell2">1 or 2</div>
<div class="cell1">rate r=</div>
<div class="cell2">0.1-0.2</div>
<div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="cell2"></div>
</div>
I suggest using contain:inline-size
which means that its contents will be treated as if they were zero width for the purpose of its contribution to the auto grid column sizing.
.grid-container {
display: inline-grid;
grid-template-columns: auto auto;
grid-gap: 3px;
border: 1px solid darkcyan;
}
.cell1 {
text-align: right;
background-color: rgba(0, 0, 0, 0.35);
}
.cell2 {
text-align: left;
}
.cell1-special {
grid-column: 1 /span 1;
align-self: left;
background-color: rgba(128, 0, 0, 0.35);
contain: inline-size;
}
<div class="grid-container">
<div class="cell1">total number N=</div>
<div class="cell2">100 ... 200</div>
<div class="cell1">repeat number M=</div>
<div class="cell2">1 or 2</div>
<div class="cell1">rate r=</div>
<div class="cell2">0.1-0.2</div>
<div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
<div class="cell2"></div>
</div>