我有这段代码，其中只有一列和三行不同的行适合视口(viewport)。每行将包含一个适合高度的图像。我想这样做，如果浏览器水平调整大小，并且该列(视口(viewport))的宽度低于某个点，则在页面上插入额外的行，这些行也适合视口(viewport)。因此，根据一列/视口(viewport)的宽度，它会从适合三行到适合四行，然后是五行，依此类推:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST SITE ONE</title>
<meta name="description" content="Test Site">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="main.css">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0px;
padding: 0px;
}
body{
display: block;
}
#page1{
background-color: aquamarine;
display: block;
width: 100vw;
height: 100vh;
max-width: 100%;
max-height: 100%;
}
.grid-container{
display: grid;
height: 100%;
grid-template-rows: repeat(3, 1fr);
}
.grid-items{
display: flex;
justify-content: center;
align-items: center;
border: 2px solid black;
}
.slot-image{
height: auto;
width:auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<section id="page1">
<div class="grid-container">
<div class=grid-items>
<img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
</div>
<div class=grid-items>image</div>
<div class=grid-items>image</div>
</div>
<div class="grid-container">
<div class=grid-items>
<img class="slot-image" src="WC%20Sov%20edit.png" alt="sov">
</div>
<div class=grid-items>image</div>
<div class=grid-items>image</div>
</div>
</section>
</body>
</html>
最佳答案
我会将 grid-template-rows: repeat(3, 1fr); 定义包装在 @media queries 中.您可以在其中定义 min 和 max 断点。
例如:
@media only screen and (max-width: 480px) { // Small Devices
.grid-container{
grid-template-rows: repeat(3, 1fr); // 3 columns
}
}
@media only screen and (min-width: 481px) and (max-width: 768px) { // Medium Devices
.grid-container{
grid-template-rows: repeat(4, 1fr); // 4 columns
}
}
@media only screen and (min-width: 769px) { // Large Devices
.grid-container{
grid-template-rows: repeat(5, 1fr); // 5 columns
}
}
关于css - 根据列宽添加新的拟合行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52373233/