<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
.row {
display: flex;
flex-wrap: wrap;
padding: 0 3px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
.column {
flex: 40%;
max-width: 40%;
padding: 0 3px;
}
/* Create 1 columns in each row */
@media screen and (max-width: 400px) {
.column {
flex: 100%;
max-width: 100%;
}
}
/*The layout will have three columns*/
@media screen and (min-width: 700px) {
.column {
flex: 30%;
max-width: 30%;
}
}
/* four columns per row */
@media screen and (min-width: 900px) {
.column {
flex: 22%;
max-width: 22%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
<div class="column">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557458-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557503-101156.jpeg" alt="img">
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1627557656-101156.jpeg" alt="img">
</div>
</div>
</body>
</html>