<div class="container">
        <ul class="grid-testimonials">
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Michael Fox</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Riley Jackson</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Eleanor Gundry</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Jorge Castillo</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Anson Mount</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Crystal Anderson</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Joshuan Soares</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Anthony Perdue</span>
            </li>
            <li>
                <div><p>&ldquo;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.&rdquo;</p><span class="quote-arrow"></span></div>
                <span class="grid-testimonials-citation">Paul George</span>
            </li>                                                                                                
        </ul>
    </div>
.container
{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  max-width: 60em;
  *zoom: 1
}
.grid-testimonials
{
  overflow: hidden;
  padding-top: 3.125em
}
.grid-testimonials li
{
  float: left;
  list-style-type: none;
  padding-bottom: 3.125em
}
.grid-testimonials p
{
  line-height: 1.5em;
  margin: 0
}
.grid-testimonials-citation
{
  color: #656262;
  display: block;
  font-size: 1.125em;
  font-weight: 700;
  margin-top: 2em;
  text-transform: uppercase;
  text-align: center
}
.grid-testimonials li div
{
  border: 10px solid #ebebeb;
  padding: 2.125em 7.638888888888889%;
  position: relative
}
.grid-testimonials .quote-arrow
{
	background: #fff;
	border-right:10px solid #ebebeb;
	border-bottom:10px solid #ebebeb;
	content: '';
	display: block;
	position: absolute;
	bottom: -32px;
	left: 50%;
	margin-left: -25px;
	width: 40px;
	height: 40px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
}
@media screen and (min-width: 50em) 
{
	.grid-testimonials li
  {
    margin-right: 5%;
    width: 30%
  }
	.grid-testimonials li:nth-child(3n)
  {
    margin-right: 0
  }
}
/* 
jQuery.fitHeights by Paravel™

Author: Dave Rupert
Author URL: http://daverupert.com/
Based on: https://github.com/filamentgroup/jQuery-Equal-Heights 

*/
(function(){
  
  $.fn.fitHeights = function() {
    
    var items = $(this);
    function setHeights() {
      
      var currentTallest = 0;
  
      items.css({ 'min-height' : currentTallest });  // unset min-height to get actual new height

      // right now this causes a noticeable shift in height on resize. workarounds?
      
      items.each(function(){
        
        if( $(this).height() > currentTallest ) { currentTallest = $(this).height(); }
      });

      items.css({ 'min-height' : currentTallest });
    
    }
    
    setHeights();
    $(window).on('resize', setHeights);
    return this;
  };
})(jQuery);

$(window).load(function(){
	/* $(groupOfItems).fitHeights(); */
  $('.grid-testimonials p').fitHeights();
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js