I am trying to create a grid view for displaying images in an HTML document. I want each li tag to have a different height, but currently they are all the same height.
Below is my HTML code:
<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>
Here is the CSS I am using:
.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;
}
If anyone has any advice on how to achieve different heights for the li tags, I would greatly appreciate it.
Thank you!