当第二列不存在时如何使列跨度全宽？ （CSS网格）

Question

我知道有类似的问题，但这是专门询问如何使用CSS网格布局。

所以我们有这个基本的网格设置：

HTML（带侧边栏）：

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

  <div class="sidebar">
    <p>sidebar</p>
  </div>

</div>

CSS：

.grid {
  display: grid;
  grid-template-columns: 1fr 200px;
}

创建看起来像这样的布局：

| content               | sidebar |

如果该页面没有侧边栏，即html看起来像这样，但是具有相同的CSS：

HTML（无边栏）：

<div class="grid">

  <div class="content">
    <p>content</p>
  </div>

</div>

页面布局看起来像这样（破折号代表空白）

| content               | ------- |

我知道为什么这样做，grid-template-columns规则中仍然定义了网格列。

我只是想知道如何告诉网格，如果没有内容，然后填充剩余空间，类似于flex-grow对flexbox的工作方式。

如果没有侧边栏，则期望的结果将如下所示。

| content                         |

Answer 1

不要用grid-template-columns定义列明确地

Answer 2

您可以使用内容大小调整关键字来接近，例如：

Answer 3

我想我现在已经知道了这个问题的明确答案。到目前为止，答案存在的问题是它们没有解释如何处理位于主要内容左侧的侧边栏（主要是因为我在原始问题中没有要求）。