当第二列不存在时，如何使列跨全宽？ （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明确定义列。

改为隐式列，然后使用grid-auto-columns定义它们的宽度。

当第二列 (.sidebar) 不存在时，这将允许第一列 (.content) 占用行中的所有空间。

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

.content {
  grid-column: 1;
}

.sidebar {
  grid-column: 2;
}

.grid > * {
  border: 1px dashed red; /* demo only */
}

<p>With side bar:</p>

<div class="grid">

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

</div>

<p>No side bar:</p>

<div class="grid">

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