如何防止两个跨度的 div 使单个列更宽？

Question

我在网格中有一个两列布局，我希望各列具有所需的宽度。 当我有两列时，这有效。 但是当我添加一个跨越两列的 div 时， 最小的列变得比它需要的更宽。 在不需要时导致宽列换行。

以下代码：

<div style="display: grid; grid-template-columns: auto auto">
    <div>Small text</div>
    <div>Longer text that needs more space</div>
    <div style="grid-column: span 2">
        A very long text that needs so much space
        I will give it two columns
    <div>   
<div>   

产生以下内容：

如您所见，由于某种原因，文本“空格”被放置在第二行。 没有很长文本的代码将显示在一行上。

如何将很长的文本放在一行中，并分成两列？

Answer 1

您可以设置

grid-template-columns: auto 1fr

:

<div style="display: grid; grid-template-columns: auto 1fr; column-gap:.4em;">
  <div>Small text</div>
  <div>Longer text that needs more space</div>
  <div style="grid-column: span 2">
    A very long text that needs so much space
    I will give it two columns
  <div>   
<div>