jQuery Square blocks in grid system. Simple responsive stay-square listings

main.js

jQuery(document).ready(function($) {
    
    // Assuming the items we want to square are .film-listing...
    if( $('.film-listing').length ) {
        makeItSquare('.film-listing');
        
        // This handles resizing and preserving the nice squareness
        $(window).bind('resizeEnd', function() {
            makeItSquare('.film-listing');
        });
    }
    
}); // (document).ready(function($)

/**
 * Makes items square based on the grid cell they're enclosed in
 */
function makeItSquare( target ) {

    $this = $(target);

    // Get the width of the grid item the targets are enclosed in.
    // We'll be setting that as the height.
    var targetWidth = $this.parents('.cell').width();
    $this.height(targetWidth);
}

/*
 * ResizeEnd
 *
 * Example:
 * $(window).bind('resizeEnd', function() {
 *  console.log('resize ended 500ms ago');
 * });
 */
$(window).resize(function() {

    if(this.resizeTO) clearTimeout(this.resizeTO);

    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);

});

square.html

<div class="grid">
    <div class="cell lap-1-3">
          <div class="film-listing" style="background-color: red">
              <a href="#">Donnie Darko</a>
          </div>
    </div><!--
 --><div class="cell lap-1-3">
          <div class="film-listing" style="background-color: blue">
              <a href="#">Interstellar</a>
          </div>
    </div><!--
 --><div class="cell lap-1-3">
          <div class="film-listing" style="background-color: green">
              <a href="#">Rocky &amp; Bullwinkle</a>
          </div>
    </div><!--
 -->
</div><!--.grid-->

style.css

/* If you want it to scale fluidly on resize + onload, add this. Nice lil' touch */
.film-listing {
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}