当第二列不存在时，如何使一列跨越整个宽度？（CSS网格）

我知道也有类似的问题，但这是专门问如何使用CSS网格布局做到这一点

因此，我们有一个基本的网格设置：

HTML（带侧边栏）：

<div class="grid">

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

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

</div>

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

<div class="grid">

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

</div>

要创建类似以下内容的布局，请执行以下操作：

| content               | sidebar |

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

nav, aside {
  width: 100%; /* Ensures that if the content exists, it takes up max-width */
  max-width: 200px; /* Prevents the content exceeding 200px in width */
}

/* ensures that the content will always be placed in the correct column */
nav {
  -ms-grid-column: 1;
  grid-column: 1;
}

main {
  -ms-grid-column: 2;
  grid-column: 2;
}

aside {
  -ms-grid-column: 3;
  grid-column: 3;
}

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

HTML（无侧栏）：

<div class="grid">

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

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

</div>

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

<div class="grid">

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

</div>

我知道为什么会这样，网格列仍然是在

网格模板列

规则中定义的

我只是想知道如何告诉网格，如果没有内容，那么填充剩余的空间，就像

flex-grow

对

flexbox

的工作方式一样

如果没有侧边栏，所需的结果将如下所示

| content                         |

不要使用

网格模板列

明确定义列

改为隐式列，然后使用

网格自动列

定义其宽度

这将允许第一列（

.content

）在第二列（

.sidebar

）不存在时占用行中的所有空间

.grid{
显示：网格；
网格自动列：1fr 200px；
}
.内容{
网格柱：1；
}
.侧边栏{
网格柱：2；
}
.grid>*{
边框：1px红色虚线；/*仅演示*/
}

带有侧栏的

：

内容

边栏

无侧栏：

内容

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

.grid {
  display: grid;
  grid-template-columns: 1fr fit-content(200px);
}

.sidebar {
  width: 100%;
}

fit content

关键字将查看内容的大小，并表现为

max content

，直到它达到您传入的值

---

实际上，您可能不需要在侧边栏上粘贴一个大小，因为内容可能会指定至少200像素的大小（例如），但您可以使用它。

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

这也是网格区域的一个很好的用例

.grid {
  display: grid;
  grid-template-columns: fit-content(200px) 1fr fit-content(200px);
  grid-template-areas: "nav content sidebar";
}

nav, aside {
  width: 100%;
}

/* ensures that the content will always be placed in the correct column */
nav { grid-area: nav; }
main { grid-area: content; }
aside { grid-area: sidebar; }

与IE兼容的版本如下所示：

| content               | sidebar |

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
}

nav, aside {
  width: 100%; /* Ensures that if the content exists, it takes up max-width */
  max-width: 200px; /* Prevents the content exceeding 200px in width */
}

/* ensures that the content will always be placed in the correct column */
nav {
  -ms-grid-column: 1;
  grid-column: 1;
}

main {
  -ms-grid-column: 2;
  grid-column: 2;
}

aside {
  -ms-grid-column: 3;
  grid-column: 3;
}

---

我认为设置宽度：100%；在侧边栏上，可能会允许侧边栏根据网格布局值确定其宽度，而不是将200px声明两次。如果需要，请不要在侧边栏上设置任何内容。这是否意味着侧边栏的宽度可能会小于200px，尽管侧边栏中没有200px的内容？这是一个很好的答案，但不幸的是，如果侧栏位于内容之前（同时更新网格列以匹配新布局），则侧栏不起作用。我不明白为什么会这样。因为

网格自动列

。将

1fr 200px

作为值，它将重复该模式以创建所需的任意多个隐式列。如果只有一列，

1fr

将占用行上的所有空间。但是，如果将值反转为

200px 1fr

，则第一个隐式行的宽度为200px。这就是为什么布局反转没有按预期工作的原因@SeanBeck@Michael_B您的小提琴示例（在上面的注释中）没有按预期工作。FFx 60（osx），Chrome 66（osx）---内容列的宽度与侧边栏的宽度相同。