CSS，GRID，尝试在溢出滚动额外内容时保持网格大小为 3x3

Question

我希望网格不超过 3X3，然后滚动其余的....看起来非常适合 9 个框和更少的大声笑！！

这是我喜欢的外观，但我只推导了 9 个或更少的盒子： Wanted

但是除 9 之外的任何值都给我这个： not wanted

列数：3： not wanted

.container{
    height: 70vh;
    width: 80vw;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}

.container::-webkit-scrollbar {
    display: none;
}

.box{
    margin: 2%;
    background-color: blueviolet;
}

html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>Routing️</title>
</head>
<body>
    <div class = "container">
        {% for i in range(num) %}
        <div class = "box">hi</div>
        {% endfor %}
    </div>
</body>
</html>

Objective：只显示3X3，其余滚动（大小相同）。请帮我解决溢出/不溢出的问题哈哈。

Answer 1

您的代码有问题。您使用了 -webkit-scrollbar 并使容器显示 none。所以，滚动条没有显示。另一件事是，尽管您使用了网格布局，但您必须为您的框添加高度，否则当有更多框时，所有框都会缩小。所以，需要给盒子增加高度。您可以尝试下面的代码。效果很好。

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/style.css">
    <title>Routing️</title>
</head>
<body>
    <div class = "container">
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
      <div class = "box">hi</div>
    </div>
</body>
</html>

CSS:

.container{
    height: 70vh;
    width: 80vw;
    border: 1px solid black;
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}



.box{
    height: 300px;
    margin: 2%;
    background-color: blueviolet;
}

Answer 2

知道了！完美运行！ webkit工具栏就是让滚动条显示none。它用于 Chrome。喜欢隐藏滚动条的外观。

我能够使用 minmax 指定高度，而 grid-auto-rows 为隐式添加的行提供了技巧。

感谢您的帮助！

发布更新代码和图片：

.container{
    height: 70vh;
    width: 80vw;
    background-color: rgba(240, 248, 255, 0.2);
    display: grid;
    justify-content: center;
    grid: repeat(3, minmax(150px,200px)) / repeat(3, minmax(150px,200px));
    grid-auto-rows: minmax(150px,150px);
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll; 
}

.container::-webkit-scrollbar {
    display: none;
} 

.box{
    margin: 2%;
    background-color: blueviolet;
}

Initial On Scroll

CSS，GRID，尝试在溢出滚动额外内容时保持网格大小为 3x3

CSS, GRID, trying keep grid size 3x3 while overflow scrolling the extra

css

grid