我希望網格不大于 3X3，然后滾動其余部分......看起來很棒 9 個盒子和更少的哈哈！
這是我喜歡的外觀，但我只推匯出 9 盒或更少： 通緝
然而，除了 9 之外的任何東西都給了我這個： 不需要
列數：3： 不需要
.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>
目標：僅顯示 3X3 并滾動其余部分（以相同的大小）。請幫我解決我的溢位/不溢位問題，哈哈。
uj5u.com熱心網友回復：
你的代碼有問題。您使用了 -webkit-scrollbar 并使容器不顯示。所以，滾動條沒有顯示。另一件事是，盡管您使用了網格布局，但您必須為您的盒子增加高度，否則當有更多盒子時，所有盒子都會縮小。因此，需要為框添加高度。您可以在下面嘗試此代碼。這是完美的作業。
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;
}
uj5u.com熱心網友回復：
知道了！完美運行！Webkit 工具列是讓滾動條不顯示。它適用于 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;
}
初始 滾動
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/389262.html