基于内容的CSS网格区域大小

我正在重组一个项目以使用网格布局。现场布局如下图所示：

当前结构，内容以模式标记

主要内容是动态的，因此在加载新内容的区域时，前面的区域会在高度上扩展，添加大量的空白空间，如下所示：

有问题的内容更改

我为

网格模板行

尝试了一大堆不同的值，结果仍然是相同的问题

我应该怎么做才能只扩展中心列的底部区域，即使它没有内容，并且保持其内部内容的大小不变

之所以不将其拆分为不同的grids/flex布局，是因为我计划将左列移动到移动设备的中央列

这是主网格容器的代码：

.grid-container {
    width: 100%;
    display: grid;
    grid-column-gap: 0;
    grid-template-columns: 255px calc(100% - 255px - 330px) 330px;
    grid-template-rows: repeat(7, auto) 100%;
    align-items: start;
    grid-template-areas:
        "sidebar flash ads"
        "sidebar profile ads"
        "sidebar form ads"
        "sidebar filterArea ads"
        "sidebar categories ads"
        "sidebar hiddenArea ads"
        "sidebar sticky ads"
        "sidebar messages ads";
    min-height: 0;

其中一些变量可能看起来很奇怪，但我必须为列设置特定的宽度，因为如果宽度保持为

auto

，有时内容会超出中央列的宽度

---

任何帮助都将不胜感激。

这非常有效。奇怪的是，无论我之前做了什么（包括这个），我最终都得到了相同的结果。我要把这归功于我的docker同步，因为这很难做到。非常感谢！重复：