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

Question

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

当前结构，其内容标记有模式

主要内容是动态的，因此在向区域中加载新内容时，先前的区域会高度扩展，从而增加了很多空白，如下所示：

问题内容更改

我已经为grid-template-rows尝试了很多不同的值，但仍然遇到相同的问题。

我应该怎么做才能扩展 ，即使中心列底部没有内容，并且让其余区域的内容大小保持相同他们吗？

之所以没有将其拆分为不同的网格/弹性布局，是因为我计划将左列移动到移动设备的中央列。

这是主网格容器的代码：

.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，有时内容会超出中心列的宽度。

任何帮助将不胜感激。