CSS Grid行高未适配内容，如何实现无间隙自动行高布局？

问题描述 #

熟悉瀑布流的多种实现方式，当前处理已知尺寸的图片。此前用绝对定位实现过，但想要更高灵活性，尝试CSS Grid方案：

• 使用CSS Grid做两列布局，通过grid-area手动指定图片在网格中的位置，根据图片相对高度设置跨越行数
• 期望列内无空白空间，但实际布局中部分行高超出内容所需，出现多余空白
• 尝试过grid-template-rows用fit-content/min-content、调整item的height属性，均未解决问题

用aspect-ratio模拟图片比例的示例代码：

<style>
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        margin: 10px;
        padding: 0;
    }

    li {
        align-items: center;
        background: lightgrey;
        border: 2px solid red;
        display: flex;
        flex-flow: column;
        font-size: 24px;
        justify-content: center;
    }

    li:nth-child(1) {
        grid-area: 1/1/2/2;
    }

    li:nth-child(2) {
        grid-area: 1/2/3/3;
    }

    li:nth-child(3) {
        grid-area: 2/1/4/2;
    }

    li:nth-child(4) {
        grid-area: 3/2/5/3;
    }

    li:nth-child(5) {
        grid-area: 4/1/6/2;
    }
</style>
<ul>
    <li style="aspect-ratio:0.87086092715232">1</li>
    <li style="aspect-ratio:0.63680387409201">2</li>
    <li style="aspect-ratio:1.5748502994012">3</li>
    <li style="aspect-ratio:0.7874251497006">4</li>
    <li style="aspect-ratio:0.63680387409201">5</li>
</ul>

问题原因 #

手动指定grid-area时，CSS Grid的行高度是全局行高，由该行内的所有元素共同决定。跨多行的元素会让Grid自动分配行高，但这种分配无法根据相邻元素的高度拆分跨多行元素的尺寸，导致行高被强制拉长，出现多余空白。fit-content/min-content仅能基于单行内的内容计算高度，无法解决跨多行元素的行高匹配问题。

解决方案 #

方案1：自动排列（推荐，高灵活性） #

去掉手动grid-area指定，利用grid-auto-flow: dense开启密集排列，让Grid自动根据元素高度填充空白区域，完全由浏览器处理布局，适合不需要严格控制元素位置的场景。

修改后的代码：

<style>
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;
        margin: 10px;
        padding: 0;
        grid-auto-flow: dense; /* 开启密集排列，自动填充空白 */
    }

    li {
        align-items: center;
        background: lightgrey;
        border: 2px solid red;
        display: flex;
        flex-flow: column;
        font-size: 24px;
        justify-content: center;
    }
</style>
<ul>
    <li style="aspect-ratio:0.87086092715232">1</li>
    <li style="aspect-ratio:0.63680387409201">2</li>
    <li style="aspect-ratio:1.5748502994012">3</li>
    <li style="aspect-ratio:0.7874251497006">4</li>
    <li style="aspect-ratio:0.63680387409201">5</li>
</ul>

方案2：手动指定位置（精确控制布局） #

如果需要严格控制元素的排列顺序，需要手动计算每一行的精确高度，通过grid-template-rows指定行高，配合grid-area定位元素。

假设列宽为W，根据每个元素的aspect-ratio计算高度，再拆分出每一行的高度：

• 元素1高度：W / 0.87086 ≈ 1.148W（占行1）
• 元素2高度：W / 0.6368 ≈ 1.570W（占行1+行2）→ 行2高度：1.570W - 1.148W ≈ 0.422W
• 元素3高度：W / 1.57485 ≈ 0.635W（占行2+行3）→ 行3高度：0.635W - 0.422W ≈ 0.213W
• 元素4高度：W / 0.787425 ≈ 1.270W（占行3+行4）→ 行4高度：1.270W - 0.213W ≈ 1.057W
• 元素5高度：W / 0.6368 ≈ 1.570W（占行4+行5）→ 行5高度：1.570W - 1.057W ≈ 0.513W

实现代码：

<style>
    ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* 按计算出的比例设置行高 */
        grid-template-rows: 1.148fr 0.422fr 0.213fr 1.057fr 0.513fr;
        gap: 2px;
        margin: 10px;
        padding: 0;
    }

    li {
        align-items: center;
        background: lightgrey;
        border: 2px solid red;
        display: flex;
        flex-flow: column;
        font-size: 24px;
        justify-content: center;
    }

    li:nth-child(1) {
        grid-area: 1/1/2/2;
    }

    li:nth-child(2) {
        grid-area: 1/2/3/3;
    }

    li:nth-child(3) {
        grid-area: 2/1/4/2;
    }

    li:nth-child(4) {
        grid-area: 3/2/5/3;
    }

    li:nth-child(5) {
        grid-area: 4/1/6/2;
    }
</style>
<ul>
    <li style="aspect-ratio:0.87086092715232">1</li>
    <li style="aspect-ratio:0.63680387409201">2</li>
    <li style="aspect-ratio:1.5748502994012">3</li>
    <li style="aspect-ratio:0.7874251497006">4</li>
    <li style="aspect-ratio:0.63680387409201">5</li>
</ul>

总结 #

• 若无需严格控制元素位置，优先选择自动排列方案，灵活性高，无需手动计算
• 若必须固定元素排列顺序，可采用手动计算行高方案，但需根据图片尺寸实时调整行高，维护成本较高

内容的提问来源于stack exchange，提问作者Jérôme