<div class="container">
<ul class="grid-testimonials">
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Michael Fox</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Riley Jackson</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Eleanor Gundry</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Jorge Castillo</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Anson Mount</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Crystal Anderson</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Joshuan Soares</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</p><span class="quote-arrow"></span></div>
<span class="grid-testimonials-citation">Anthony Perdue</span>
</li>
<li>
<div><p>“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet mattis interd. Phasellus volutpat pellentesque dui, sit amet commodo risus faucibus sit amet.”</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();
});
This Pen doesn't use any external CSS resources.