不均匀的 CSS 列网格

Question

从我对这个问题的研究中，我了解到 CSS 网格似乎能够处理相当复杂的行为。我的场景更简单，我希望有 4 个均匀间隔的面板框，代码如下。我的问题是为什么水平间隙不在垂直中间居中？我通过 trail&error 来测试对齐、对齐和网格规范的各种组合，但找不到解决方案。我需要在我的代码中添加什么才能使间隙在页面上垂直居中？.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班级