当后者为空时将CSS网格区域扩展到另一个网格区域[重复]答案

【问题标题】：Expanding a CSS grid area into another grid area when the latter is empty [duplicate]当后者为空时将CSS网格区域扩展到另一个网格区域[重复]
【发布时间】：2020-05-27 15:19:51
【问题描述】：

我有以下简单的网格设置。它在同时存在content 和sidebar div 的情况下按预期工作，但是我希望content 区域在sidebar 区域不存在时扩展以填充sidebar 留下的区域在页面上。在下面示例的第二个网格中，sidebar 不存在，但content 区域不会扩展以填充剩余空间。我希望它这样做。

/* Based on example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas */

.content {
    grid-area: main;
}
.sidebar {
    grid-area: side;
}
.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "main side"
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto 30px auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

<!-- First grid - works fine -->
<div class="wrapper">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

<!-- Second grid - content should expand to fill the area that would be used by sidebar -->
<div class="wrapper">
    <div class="content">Content</div>
</div>

也许这是我不应该为此使用 CSS 网格而是浮动的情况？

【问题讨论】：

单个父容器将用于网格，然后您可以在网格内任意设置子容器。
查看示例让网格单元为空然后跨越多个单元以了解您做错了什么;)

标签： html css css-grid

【解决方案1】：

如果您不必使用网格区域，则 flexbox 会给出预期的结果。无需使用浮动。

/* Based on example from https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas */

.content {
    flex-grow: 1;
}
.sidebar {
    flex-grow: 1;
}
.wrapper {
    display: flex;
}
* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
    max-width: 940px;
    margin: 0 auto 30px auto;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}

<!-- First grid - works fine -->
<div class="wrapper">
    <div class="content">Content</div>
    <div class="sidebar">Sidebar</div>
</div>

<!-- Second grid - content should expand to fill the area that would be used by sidebar -->
<div class="wrapper">
    <div class="content">Content</div>
</div>

【讨论】：

【解决方案2】：

您的包装器包含两列，其中指定：

grid-template-columns: 1fr 1fr;

两列都是 1fr 宽（总共 2 列的 1 分之一）

删除其中一个 div 不会扩展另一个，因为它仍然是两个分数中的 1 个。

删除网格中的一列将解决您的问题：

grid-template-columns: 1fr;

作为旁注，由于您的包装器现在只包含一个 div，因此将其作为网格毫无意义。

【讨论】：