MEDIA QUERY BREAKPOINTS FOR GRID LAYOUT
Run
<!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>