如何用display:grid让2列网格元素自动填充垂直空隙？

我正在实现一个2列grid布局，但部分元素的高度高于其他元素，导致垂直方向出现较大空隙。希望在保留grid布局的前提下，让下方元素自动上移填充这些空隙；曾尝试设置span 2，但高度过大，想要类似1.33倍的跨度却因必须为整数无法实现，询问是否有遗漏的display:grid属性可实现该效果。

当前CSS代码 #

.container-gpt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 77%;
    margin-inline: auto;

}


.bubble h3, .learn-more a, .bubble p {
    color: white !important;
    margin:0px !important;
}
.bubble {
    background-color: #051B26;
    border-radius: 15px;
    padding: 20px 20px;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 17rem;
}

.bubble:hover {
    background-color: #136A64; /* Different color on hover */
}

.bubble img {
    width: auto;
    height: 122px;
}

.learn-more {
    color: #051B26;
    text-decoration: none;
}

a.learn-more {
    color: white;
    font-size: large;
}
.learn-more:hover {
    text-decoration: underline;
}
.bubble:first-child {
    min-height: 22.65rem;
}
.bubble:not(:first-child) {
    height: 17rem; /* Set fixed height for bubbles other than the first */
}

当前HTML代码 #

<div class="container-gpt">
<div  id="basecamp" class="bubble item1  greenhover">

  <img src="/images/ec79b373-4939-48e6-a455-6e31314c03b6/Icon_Basecamp_Large.png" alt="Basecamp" data-image="6tlj5gbrco2p">
    <h3>Basecamp</h3>
    <p>View Your Basics</p>
    <a href="#" class="learn-more">Learn More &gt;</a>
</div>


<div id="accountmng" class="bubble item2 greenhover ">
    <img src="/images/c938ee00-0f29-4341-bfce-a9902efd3c26/Icon_AccountsManagement_Small.png" alt="Accounts Management" data-image="sq10hlnbpmuu">
    <span class="force-white">Progress: 30%</span>
    <h3>Accounts Management</h3>
    <a href="#" class="learn-more">Learn More &gt;</a>

</div>

<div  id="cashflow" class="bubble  item3 greenhover">

    <img src="/images/c938ee00-0f29-4341-bfce-a9902efd3c26/Icon_AccountsManagement_Small.png" alt="Accounts Management" data-image="sq10hlnbpmuu">
    <h3>Basecamp</h3>
    <p>View Your Basics</p>
    <a href="#" class="learn-more">Learn More &gt;</a>
</div>


<div id="cashmg" class="bubble item4 greenhover ">
    <img src="/images/c938ee00-0f29-4341-bfce-a9902efd3c26/Icon_AccountsManagement_Small.png" alt="Accounts Management" data-image="sq10hlnbpmuu">
    <span class="force-white">Progress: 30%</span>
    <h3>Accounts Management</h3>
    <a href="#" class="learn-more">Learn More &gt;</a>

</div>

解决方案 #

核心思路 #

利用grid-auto-flow: dense开启Grid的密集排列模式，让布局自动填充空隙；同时通过拆分行轨道的方式，实现近似1.33倍的高度比例（4/3≈1.33），避免span 2带来的高度过大问题。

修改后的CSS代码 #

.container-gpt {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(auto-fill, 5.666rem); /* 将17rem拆分为3等分轨道 */
    gap: 20px;
    padding: 20px;
    max-width: 77%;
    margin-inline: auto;
    grid-auto-flow: dense; /* 关键属性：自动填充空隙 */
}

.bubble h3, .learn-more a, .bubble p {
    color: white !important;
    margin:0px !important;
}
.bubble {
    background-color: #051B26;
    border-radius: 15px;
    padding: 20px 20px;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-row: span 3; /* 普通元素占3个轨道，总高度≈17rem */
}

.bubble:hover {
    background-color: #136A64;
}

.bubble img {
    width: auto;
    height: 122px;
}

.learn-more {
    color: #051B26;
    text-decoration: none;
}

a.learn-more {
    color: white;
    font-size: large;
}
.learn-more:hover {
    text-decoration: underline;
}
.bubble:first-child {
    grid-row: span 4; /* 高元素占4个轨道，比例4/3≈1.33，匹配需求 */
}

关键说明 #

1. grid-auto-flow: dense：默认Grid按元素顺序排列，开启该属性后，布局会优先填充前面的空白区域，实现元素自动上移补位。
2. 拆分行轨道：将普通元素的高度（17rem）拆分为3个等分行轨道，让高元素占4个轨道，刚好达到1.33倍的高度比例，避免整数span的限制。
3. 移除固定高度：去掉bubble的height和max-height设置，改用grid-row: span控制元素占据的轨道数量，让布局更灵活。

内容的提问来源于stack exchange，提问作者fjimenez