Mesh display with different heights - HTML

I want to display images as a grid in an HTML document. Here is an image of the sample that is looking for.

I want different heights for my li tag. Now my HTML has the same height for all li tags.

This is my html

<div class="blog_main_midd_section"><ul>
                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img01.png" alt="">

                        </div>
                    </li>
                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img02.png" alt="">

                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img03.png" alt="">
                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img04.png" alt="">

                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img05.png" alt="">

                        </div>
                    </li>
</ul>
</div>

CSS

.blog_main_midd_section {
 display:block;
}
.blog_main_midd_section ul {
 display:block;
 margin:0 0 75px 0;
}

.blog_main_midd_section ul li {
 display:inline-block;
 border:1px solid #50565a;
 width:31%;
 padding:0 0 20px 0;
 height:auto;
 margin:15px 1%;
 vertical-align:top;
}

Can anyone advise me how to do this.

Thanks in advance