CSS列网格不均匀

Question

通过对这个问题的研究，我了解到CSS网格似乎具有相当复杂的性能。我的情况比较简单，我期望有4个等距的面板框，下面的代码。我的问题是为什么水平间隙不在垂直中间居中？我通过跟踪和错误测试了对齐，对正和网格规格的各种组合，但是找不到解决方案。我需要在代码中添加些什么，以使间隙垂直位于页面的中心？

.main-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    height: 100vh;
    align-items: stretch;
    margin: 0;
    padding: 0;
    justify-content: space-between;
}

.container {
    border: 3px solid black;
    display: flex;
    position: relative;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.shared {
    justify-content: center;
    border: none;
}

.sub-container {
    border: 3px solid black;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
} 

<div class="main-container">
    <div class="container" id="A">
        <h1>Section A</h1>
        <p id="A-values">A Values</p>
    </div>
    <div class="container" id="B">
        <h1>Section B</h1>
        <p id="B-values">B Values</p>
    </div>
    <div class="container" id="C">
        <h1>Section C</h1>
        <p id="C-values">C Values</p>
    </div>
    <div class="container shared" id="D">
        <div class="sub-container">
            <h2>SubSection D1</h2>
            <p id="D1-values">D1 Values</p>
        </div>
        <div class="sub-container">
            <h2>SubSection D2</h2>
            <p id="D2-values">D2 Values</p>
        </div>
        <div class="sub-container">
            <h2>SubSection D3</h2>
            <p id="D3-values">D3 Values</p>
        </div>
    </div>
</div>

Answer 1

默认情况下，将高度设置为与一行中最长的项匹配，底部行的高度与顶部行的高度不同，仅仅是因为其中一列中包含更多内容。

尝试在具有列的情况下设置行，将grid-template-rows: repeat(2, 1fr);添加到main-container类中