将网格容器缩小到行数答案

【问题标题】：Shrink grid container to number of rows将网格容器缩小到行数
【发布时间】：2021-07-22 08:00:54
【问题描述】：

我有一个带有网格和 div 的 flexbox，我想将网格容器的高度折叠到行的高度，这样它下面的按钮就在网格项的下方。行数也是动态的，因为我使用的是grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)。我可以设置网格项的最大高度，就像在this image 中一样，但这只会使项变小并且不会使网格容器更短。

我尝试更改它们所在的 flexbox，使 flex-direction 为 row，并将 flex-wrap 设置为 wrap，但是当窗口大小更改时，这会导致其他问题和重叠文本。将网格容器的高度或最大高度设置为 fit-content 似乎也无济于事。

这是我所拥有的：

<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Boardgame Database</title>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    aside {
        background-color: red;
        flex: 1;
        min-width: 250px;
    }

    .grid-container {
        flex: 4;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-item {
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 24px;
        text-align: center;
        overflow: hidden;
        min-height: 100px;
    }

    #main-container {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }

    #section-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #page-buttons {
        height: 50px;
        text-align: center;
        font-size: 20px;
    }
</style>
</head>

<body>

<div id="main-container">

    <aside class="sidebar">
    </aside>

    <div id="section-container">
        <section class="grid-container">

            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>

        </section>

        <div id="page-buttons">

            <a href="test.html?page=1">first</a>
            <a href="test.html?page=2">prev</a>
            page
            <a href="test.html?page=3">next</a>
            <a href="test.html?page=4">last</a>

        </div>
    </div>
</div>

</body>
</html>

【问题讨论】：

标签： html css flexbox css-grid

【解决方案1】：

风格

.grid-container {
      flex: 4; 
}

相当于flex-grow: 4;

所以它使容器增长。只需将其删除，它将保持其尺寸

    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    aside {
        background-color: red;
        flex: 1;
        min-width: 250px;
    }

    .grid-container {
         /* flex: 4;  */
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    .grid-item {
        border: 1px solid rgba(0, 0, 0, 0.8);
        padding: 20px;
        font-size: 24px;
        text-align: center;
        overflow: hidden;
        min-height: 100px;
    }

    #main-container {
        display: flex;
        flex-direction: row;
        min-height: 100vh;
    }

    #section-container {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    #page-buttons {
        height: 50px;
        text-align: center;
        font-size: 20px;
    }

<body>

<div id="main-container">

    <aside class="sidebar">
    </aside>

    <div id="section-container">
        <section class="grid-container">

            <div class="grid-item">1</div>
            <div class="grid-item">2</div>
            <div class="grid-item">3</div>

        </section>

        <div id="page-buttons">

            <a href="test.html?page=1">first</a>
            <a href="test.html?page=2">prev</a>
            page
            <a href="test.html?page=3">next</a>
            <a href="test.html?page=4">last</a>

        </div>
    </div>
</div>

</body>

【讨论】：