我尝试使用flex和grid，但不能满足所有要求。开始认为这是不可能的。我以为您不需要媒体查询，但也许您也需要媒体查询？
rockyhmrr 回答：CSS画廊的布局可以完成吗？
结果
HTML
<div class="container">
<div class="squares">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
<div class="square">4</div>
<div class="square">5</div>
<div class="square">6</div>
<div class="square">7</div>
<div class="square">8</div>
<div class="square">9</div>
<div class="square">10</div>
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background: lightblue;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.squares {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
width: 330px;
}
.square {
height: 100px;
width: 100px;
margin: 5px;
background: cyan;
box-shadow: 1px 2px 5px #536a72;
}
@media screen and (min-width: 600px) {
.squares {
width: 440px;
}
}
@media screen and (min-width: 700px) {
.squares {
width: 550px;
}
}
@media screen and (min-width: 1050px) {
.squares {
width: 1050px;
}
.square {
height: 200px;
width: 200px;
}
}
调整屏幕大小
.container {
padding: 30px;
background: #d2d2d2;
}
.container h4 {
margin-bottom: 40px;
}
.container .gallery {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.container .gallery .item {
width: 100vw;
margin: 5px;
height: 100vw;
background: #fff;
max-width: calc(100vw/5 - 30px);
max-height: calc(100vw/5 - 30px);
filter: drop-shadow(5px 7px 4px rgba(0,.3));
}
@media only screen and (max-width: 767px){
.container .gallery .item {
max-width: calc(100vw/3 - 41px);
max-height: calc(100vw/3 - 41px);
}
}<div class="container">
<h4>Div Container</h4>
<div class="gallery">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>,
尝试此代码。希望对您有帮助。
body{
background-color:rgba(191,239,255,0.7);
}
.all-div{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.single-div{
width: calc(100% / 5 - 10px);
height: 150px;
background-color: #b4f0ff;
box-shadow: 1px 2px 5px #536a72;
margin: 5px;
}
@media (max-width: 575px){
.single-div{
width: calc(100% / 3 - 8px);
height: 90px;
margin: 4px;
}
.container {
padding-right: 30px;
padding-left: 30px;
}
}<div class="container">
<div class="all-div">
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
<div class="single-div"></div>
</div>
</div>