CSS网格：防止具有冗长文本的特定单元格设置其列的宽度

Question

在具有两列的网格布局中，我有几行具有相似的内容，而最后一行在其第一个单元格中具有较长的文本。

我用

display: inline-grid

和

grid-template-columns: auto auto

使容器最小化其宽度，而无需对常规列中的短文本进行换行/软换行（

min-content

不会这样做）。但我确实想要对最后一行中的文本进行软包装，这样它就不会设置行和容器的宽度。

.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>

或作为 jsFiddle。

是否可以仅使用 css 来阻止最后一行中的单元格设置其列的宽度？我希望简单的答案是否定的，但我想也许有一个基于重组网格、添加子网格、空列、一些 CSS 函数的巧妙使用等的创造性解决方案。

由于单元格文本是服务器生成的，因此我无法对文本进行静态测量，但我可以以任何需要的方式重新排列数据。所以我认为基于固定大小的解决方案是不可接受的，比如

grid-template-columns: fit-content(130px) auto;

，但至少下面的代码片段准确地说明了我正在寻找的内容：

.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>

Answer 1

我建议使用

contain:inline-size

，这意味着它的内容将被视为零宽度，以便对自动网格列大小做出贡献。

.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>