Phase 8: Bonus! Fix those columns that just won’t go to the same height

I know those columns with the equal-height problem have been driving you CRAZY. I wanted to be sure to get through all of the most important material first, so if there’s time, I’ll show you how you can make your columns equal height and get around the wrapping problem the grid is introducing.

1. Download grids.min.js from here:
https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows

Save in your js folder.

2. You will need jQuery to make this code work. Also, grids.min.js must be in the head of the document, not near </body>. Therefore, we’ll load jQuery in the head of the document as well. 

Link to jQuery and to grids.min.js BEFORE the PictureFill code, around lines 10-11.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>"
<script src="js/grids.min.js"></script>

3. Select the elements that need to be equal height. In this case, each of our elements has a class of col-1-2, so let’s leverage that to bind the grids JS. 

                  jQuery(function($) {
			$('.col-1-2').responsiveEqualHeightGrid();	
		});

This can be combined with the <script> tag that already exists for PictureFill:

	<script>
		jQuery(function($) {
			$('.col-1-2').responsiveEqualHeightGrid();	
		});
		// Picture element HTML5 shiv
		document.createElement( "picture" );
	</script>