grid + flex
以下为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">
<title>动物相册</title>
<link rel="stylesheet" href="css/animals2.css">
</head>
<body>
<div class="container">
<div class="grid">
<div class="big"><img src="img/monkey.jpg"><p>Monkey</p></div>
<div><img src="img/eagle.jpg"><p>Eagle</p></div>
<div class="big"><img src="img/bird.jpg"><p>Bird</p></div>
<div><img src="img/bear.jpg"><p>Bear</p></div>
<div class="big"><img src="img/swan.jpg"><p>Swan</p></div>
<div><img src="img/elephants.jpg"><p>Elephant</p></div>
<div><img src="img/owl.jpg"><p>Owl</p></div>
</div>
</div>
</body>
<!--相册设置为自适应,放缩窗口不出现滚动条-->
</html>
以下为css代码
*{
margin:0;
padding:0;
}
.container{
background-color: rgba(8,89,77,0.764);
margin:20px;
padding:10px;
}
.grid{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
grid-gap:15px;
grid-auto-flow:row dense;
}
.grid div{
display:flex;
flex-direction:column;
}
div p{
height:2rem;
line-height:2rem;
background-color: rgb(20,63,60);
color:#fff;
text-align: right;
padding-right: 10px;
}
.big{
grid-row:span 2;
grid-column:span 2;
}
div img{
flex:1;
}