html - 将网格容器缩小到行数

问题描述

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

我尝试更改它们所在的 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>

标签： htmlcssflexboxcss-grid

样式

.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>

html - 将网格容器缩小到行数

问题描述

解决方案

推荐阅读