Equal grid height

Equal grid height

by Nikhil krishnan

HTML

<div class="grid">

  <div id="layers-widget-column-58-488" class="layers-masonry-column layers-widget-column-488 span-4  first  column ">

    <div class="media image-top medium">

      <div class="media-body text-left">
        <h5 class="heading">
																													Genuine Code																											</h5>
        <div class="excerpt">
          <p>Clevrsoft ensures standardized codes compatible with W3C international standards.</p>
        </div>
      </div>
    </div>
  </div>

  <div id="layers-widget-column-58-256" class="layers-masonry-column layers-widget-column-256 span-4    column ">

    <div class="media image-top medium">

      <div class="media-body text-left">
        <h5 class="heading">
																													Fit for All																											</h5>
        <div class="excerpt">
          <p>Whatever the browsers users may use to surf your website, Clevrsoft ensure safe navigation without any crashes.</p>
          <p>
            <br>
          </p>
        </div>
      </div>
    </div>
  </div>

  <div id="layers-widget-column-58-59" class="layers-masonry-column layers-widget-column-59 span-4  last  column ">

    <div class="media image-top medium">

      <div class="media-body text-left">
        <h5 class="heading">
																													Trendy Codes As Well!																											</h5>
        <div class="excerpt">
          <p>To ensure strong web product, Clevrsoft always keeps up-to-date with the most recent IT innovations day by day.</p>
        </div>
      </div>
    </div>
  </div>

  <div id="layers-widget-column-58-632" class="layers-masonry-column layers-widget-column-632 span-4  first  column ">

    <div class="media image-top medium">

      <div class="media-body text-left">
        <h5 class="heading">
																													Strong Relationships																											</h5>
        <div class="excerpt">
          <p>Build up your CMS and select the framework appropriate for...

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.span-4 {
  width: 33.3333%;
  border: solid 1px #fff;
  float: left;
  background-color: #ccc;
  padding: 10px;
}

JavaScript

//Equal grid height 

function blockHeightGrid() {
  itemBlock = $('.span-4');
  var maxHeight = -1;
  
  itemBlock.each(function() {
    if ($(this).height() > maxHeight) {
      maxHeight = $(this).height();

    }
  });  
  itemBlock.height(maxHeight);  
}
//initiate function
blockHeightGrid();

$(window).resize(function() {
  setTimeout(function() {
    itemBlock.height('auto');
    blockHeightGrid();
  }, 100);
});