Equal height columns using css flexbox

Equal height columns have many way to create, here have nice way to create Equal height columns using css flexbox, it's a very simple. and using the flexbox you can also do Equal height thumbnail boxes, text vertically center etc...

Demo Download

Equal Height columns

Demo

Here's demo of Equal Height columns

HTML

First We creating structure for Equal Height columns

<div class="equal-columns-row">

    <div class="equal-height-columns columns-aside">
        <h2>Left SideBar</h2>
        <p>Aenean ligula turpis, congue quis imperdiet nec, venenatis at mauris. Pellentesque luctus risus vel lectus condimentum, ut tempor purus rhoncus. Aliquam hendrerit aliquet congue.</p>
    </div>
    
    <div class="equal-height-columns">
        <h2>Middle Container</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis pellentesque porttitor. Curabitur risus sapien, pharetra at efficitur id, porttitor quis justo. Pellentesque vel purus arcu. Aenean sollicitudin, mi vel finibus euismod, nunc purus interdum elit, sit amet varius ligula magna in lorem. Morbi a est at purus bibendum feugiat.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis pellentesque porttitor. Curabitur risus sapien, pharetra at efficitur id, porttitor quis justo. Pellentesque vel purus arcu. Aenean sollicitudin, mi vel finibus euismod, nunc purus interdum elit, sit amet varius ligula magna in lorem. Morbi a est at purus bibendum feugiat.</p>
        <h3>Lorem ipsum dolor sit amet,</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sagittis pellentesque porttitor. Curabitur risus sapien, pharetra at efficitur id, porttitor quis justo. Pellentesque vel purus arcu. Aenean sollicitudin, mi vel finibus euismod, nunc purus interdum elit, sit amet varius ligula magna in lorem. Morbi a est at purus bibendum feugiat.</p>
        
    </div>
    
    <div class="equal-height-columns columns-aside">
        <h2>Right SideBar</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
    </div>
</div>

CSS

for Equal columns the css is as follows:

.equal-columns-row {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    
    border:solid 1px rgba(000,000,000,0.2);
}
.equal-height-columns {
    background: #FFF;
    width: 56%;
    padding: 0 2%
}
.columns-aside {
    background: #e2e2e2;
    width: 16%;
}
@media only screen and (max-width: 767px) {
  .equal-columns-row{ flex-direction: column ;}
  .equal-height-columns{ width:auto }
}

Equal height of thumbnail boxes

you have seen above example of Equal Height columns, we have used display: flex; in css for made Equal height of columns, and it's working excellent, now we are going to do Equal height of thumbnail boxes, there is have same way but we use flex-wrap: wrap; for wrap thumbnail item, ul li for html structure. you can seen the below demo and html, css for this

Demo

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis.

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Curabitur, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattit felis. Aliquam erat volutpat. Curabitur

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur

• 

  Lorem ipsum dolor sit amet, tempor nec eget felis. Aliquam erat volutpat. Curabitur

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur

• 

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nabitur

HTML

<ul class="equal-height-thumbnail">
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. </p>
        </div>
        </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Aliquam erat volutpat. Curabitur, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattit felis. Aliquam erat volutpat. Curabitur </p>
        </div>
    </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  </p>
        </div>
    </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
    </div>
    </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
             <p>Lorem ipsum dolor sit amet, tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
        </div>
    </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
        <div class="caption">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nec eget felis. Aliquam erat volutpat. Curabitur </p>
        </div>
    </li>
    <li>
        <figure><img src="img/thumb.jpg" alt="Equal height of thumbnail"></figure>
            <div class="caption">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eget enim et augue mattis tempor nabitur </p>
        </div>
    </li>

</ul>

CSS

.equal-height-thumbnail {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      
      -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      
      margin: 0;
      padding: 0;
      list-style: none;
}
.equal-height-thumbnail li {
      width: 22%;
      margin: 0 1% 20px;
      padding:0 0.5%;
      background: #FFF;
      box-shadow: 0 0 1px 1px rgba(0,0,0,0.1);
}
.equal-height-thumbnail figure {
      display: block;
      margin: 5px 0;
      padding: 0;
}
.equal-height-thumbnail figure img{
     width:100%;
}
.caption { 
    padding: 2%;
 }

@media only screen and (max-width: 990px) {
  .equal-height-thumbnail li {
      width: 30.2%;
  }
  }@media only screen and (max-width: 767px) {
    .equal-height-thumbnail li {
     width: 46.5%;
  }
}

Lastly, you can view and download the source code from the below links.

Demo Download