我有这段代码，其中只有一列，其中三个不同的行适合视口。每行将包含一个根据高度适合的图像。我要这样做，以便如果浏览器水平调整大小，并且该列（视口）的宽度降到某个点以下，然后在也适合视口的页面上插入其他行。因此，取决于一列/视口的宽度，它会从适合三行，适合四行，然后适合五行等等快速完成：
<!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/