Within a grid layout featuring two columns, multiple rows contain similar content. However, the final row holds a longer text in its first cell.
To minimize the width of the container without linebreaks/soft wraps for the shorter texts in the regular columns (where `min-content` is not applicable), I utilize `display: inline-grid` and `grid-template-columns: auto auto`. Nonetheless, I do desire soft wraps for the last row's text so it does not dictate the width of the row or 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 there a CSS-only solution to prevent the last row's cell from determining the column's width? My initial assumption is that this is not possible, but perhaps a creative approach involving grid restructuring, subgrids, an empty column, or clever use of CSS functions could provide a workaround.
As the cell texts are dynamic, predefining their sizes is unfeasible. Hence, a fixed-size solution such as `grid-template-columns: fit-content(130px) auto;` would not suffice. Nevertheless, the code snippet below visually conveys my ideal outcome:
.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>