<!DOCTYPE html>
<html>
<head>
<title>15 Images Example</title>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
height: 100vh;
}
.container div, .container span {
box-sizing: border-box;
height: calc(33.33% – 10px);
width: calc(33.33% – 10px);
margin: 5px;
padding: 0;
border: 5px solid white;
overflow: hidden;
}
.container img {
height: 100%;
width: 100%;
object-fit: cover;
object-position: center;
}
</style>
</head>
<body>
<div class=”container”>
<div><img src=”image1.jpg”></div>
<div><img src=”image2.jpg”></div>
<div><img src=”image3.jpg”></div>
<div><img src=”image4.jpg”></div>
<div><img src=”image5.jpg”></div>
<div><img src=”image6.jpg”></div>
<div><img src=”image7.jpg”></div>
<div><img src=”image8.jpg”></div>
<div><img src=”image9.jpg”></div>
<div><img src=”image10.jpg”></div>
<div><img src=”image11.jpg”></div>
<div><img src=”image12.jpg”></div>
<span><img src=”image13.jpg”></span>
<span><img src=”image14.jpg”></span>
<span><img src=”image15.jpg”></span>
</div>
</body>
</html>
Site Title 