如何实现Grid行高自适应内容，避免标题溢出第二行？

问题描述 #

三列页面布局在桌面端时，标题（header）换行显示会溢出到第二行，需要让第一行高度自适应内容，使表格（table）仅在标题结束后开始显示。

原代码 #

CSS #

.grid {
    display: grid;
    grid:
        "header"
        "image"
        "box"
        "table";
    grid-template-rows: 4 (auto);
    gap: 1rem;
    border: 1px solid #000;
}

.area-header {
    grid-area: header;
    border: 1px solid #000;
    background-color: red;
    margin: 0;
}

.area-image {
    grid-area: image;
    border: 1px solid #000;
}

.area-box {
    grid-area: box;
    border: 1px solid #000;
    background-color: pink;
}

.area-table {
    grid-area: table;
    border: 1px solid #000;
    background-color: purple;
    color: white;
}

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas:
            "image header box"
            ". table .";
        grid-template-rows: 40px 1fr;
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        margin-top: 80px;
    }
}

HTML #

<div class="grid">
    <h1 class="area-header">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        Maecenas in aliquet quam. Sed ac lectus scelerisque, maximus
        nulla eu, fringilla.
    </h1>
    <img src="https://i.ibb.co/6yzWVry/rectangle.png" class="area-image" />
    <div class="area-box">
        <p>content</p>
    </div>
    <table class="area-table">
        <tr>
            <td>table</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
</div>

问题截图 #

解决方案 #

问题根源在于桌面端媒体查询中，grid-template-rows 设置了固定高度 40px，无法容纳多行标题内容，导致标题溢出到表格区域。只需将固定高度改为 auto，让第一行高度自适应内容：

修改后的媒体查询部分CSS：

@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas:
            "image header box"
            ". table .";
        grid-template-rows: auto 1fr; /* 将40px改为auto */
        grid-template-columns: 1fr 1fr 1fr;
        row-gap: 0;
        margin-top: 80px;
    }
}

修改后，第一行会根据标题的实际高度自动调整，表格所在的第二行会紧跟在第一行下方，不会与标题内容重叠。

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