Align Images On Each Other

I wonder if anyhow know a solution to my headache, i want the third image to be under the first. But as the second image height is larger than the first it creates empty space. Ho

Solution 1:

.gal {
	
	
	-webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
	  
	
	}	
	.gal img{ width: 100%; padding: 7px 0;}
@media (max-width: 500px) {
		
		.gal {
	
	
	-webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
	  
	
	}
		
	}

<div class="container">


<h1>Pure Css Responsive Masonry Gallery</h1>
<div class="col-md-12">
<div class="row">
<hr>

	<div class="gal">
	
	<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
	
		<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
		
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
			
			<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
			
		
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
			
			<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
			
				<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt=""><img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
					<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
						<img src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
			
						<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
				<img src="https://preview.ibb.co/mWpE3Q/2.jpg" alt="">
				
	</div>
	
</div>
</div>
</div>

try this code

Solution 2:

I've added a class named .photos and added/removed to .portimg some css.

The column-count property specifies the number of columns an element should be divided into and the column-gap property specifies the gap between the columns.

See CSS-Tricks for more informations.

.column_1_5_of_3 {
  width: 100%;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

.column_1_5_of_3 {
  width: 100%;
}

.photos {
   /* Prevent vertical gaps */
   line-height: 0;
   
   column-count:         5;
   column-gap:           2px;
}

.col_nomargin {
  display: inline-block;
  position: relative;
  float: left;
  margin: 0% 0% 0.25% 0.25%;
  overflow: hidden;
}

.portimg {
  transition: .5s ease;
  display: block;
  margin: 2px;
}

<div class="col_nomargin column_1_of_3 photos">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x400" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x300" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x200" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x600" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x100" alt="">
  <img class="portimg" src="http://via.placeholder.com/100x900" alt="">
 </div>