CSS 显示网格中的垂直对齐问题 [已关闭]

问：

有了这个CSS 我有一个问题： 当 div.body 变得很长时，midDx1 会保持上升，但 midDx2 可能会下降到 div.body 长度的一半，在两者之间留下很多空间。 我可以纠正它吗？

.container {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto auto 1fr;
    gap: 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "topSx topCenter topDx"
        "midSx body midDx1"
        "midSx body midDx2"
        "footer footer footer";
}

div.topCenter {
    grid-area: topCenter;
}

div.topSx {
    grid-area: topSx;
}

div.topDx {
    grid-area: topDx;
}

div.topSx, div.topDx {
    padding-top: 8px;
}

div.body {
    grid-area: body;
    padding: 0 10px;
}

.midSx {
    grid-area: midSx;
    margin-left:10px;
}

nav.midDx1, nav.midDx2 {
    margin-right:10px
}
nav.midDx1 {
    grid-area: midDx1;
}

nav.midDx2 {
    grid-area: midDx2;
}

div.footer {
    grid-area: footer;
}

我以为随着 Body div 的增加，右边的两个 div 保持在顶部，一个接一个