Fluid Grid Text-align: Justify / Equal Heights

by DannyEnglander

HTML

<ul id="Grid" class="main">
    <li>Gally maroon schooner wench provost fathom haul wind parrel chantey brigantine.</li>
    <li>Ho six pounders Arr black spot port jib hogshead spirits bilge rat Admiral of the Black. Blow the man down measured fer yer chains hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</li>
    <li>Lass gangplank bilged on her anchor bring a spring upon her cable rigging lookout Admiral of the Black sheet wench rutters.</li>
    <li>Driver rope's end port spirits cog fore ye snow sloop hogshead. Belaying pin yo-ho-ho bilge rat come about squiffy spirits jack galleon Brethren of the Coast hang the jib.</li>
    <li>Hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</li>
    <li>Plate Fleet strike colors nipper league warp to go on</li>
    <li>Admiral of the Black sheet wench rutters.</li>
    <li>Jack galleon Brethren </li>
    <li>Gally maroon schooner wench provost fathom haul wind parrel chantey brigantine.</li>
    <li>Ho six pounders Arr black spot port jib hogshead spirits bilge rat Admiral of the Black. Blow the man down measured fer yer chains hail-shot jolly boat gangway pillage lugsail wherry Jolly Roger Privateer.</li>
  <li class="placeholder"></li>
  <li class="placeholder"></li>
  
</ul>

CSS

/* -- DEFAULTS -- */

div, ul, li{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* -- FLUID GRID STYLES -- */

#Grid{
  margin-bottom: 40px;
  text-align: justify;
  font-size: 0.1px;
}

#Grid * {
  font-size: 1rem;
  text-align: left;
}

#Grid li{
  display: inline-block;
  background: #eee;
  width: 23%;
  margin-bottom: 2.5%;
  vertical-align: top;
}

#Grid:after{
  content: '';
  display: inline-block;
  width: 100%;
  border-top: 10px dashed #922d8d; /* Border added to make element visible for demonstration purposes */
}

#Grid .placeholder{
  padding: 0;
  border-top: 10px solid #922d8d; /* Border added to make element visible for demonstration purposes */
  background: none;
}

/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */

@media (max-width: 960px){
  #Grid li{
    width: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */

@media (max-width: 768px){
  #Grid li{
    width: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */

@media (max-width: 480px){
  #Grid li{
    width: 100%;
    margin-bottom: 5%;
  }
}


/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
body {
  font-family: verdana, sans-serif;
  color: #333;
  font-size 100%;
}

label{
  padding: 8px 15px;
  margin-bottom: 20px;
  display: block;
  font: 100 22px "Helvetica Neue"; 
  border-left: 10px solid #922d8d;
}

label:last-of-type{
  border-left: 10px dotted #922d8d;
}

p{
  font: 200 15px/1.5em "Helvetica Neue";
  max-width: 400px;
  margin-bottom: 30px;
  color: #333;
}

h1 {
  text-align: left;
  text-transform: initial;
  font-size: 1.8rem;
}

a {
  color: #888;
}

#Grid li span.grid-pad {
  padding: 4%;
  display: block;
}

JavaScript

/* Thanks to CSS Tricks for pointing out this bit of jQuery
http://css-tricks.com/equal-height-blocks-in-rows/
It's been modified into a function called at page load and then each time the page is resized. One large modification was to remove the set height before each new calculation. */

// Start plugin

(function( $ ) {
equalheight = function (container) {

    var currentTallest = 0,
        currentRowStart = 0,
        rowDivs = new Array(),
        $el,
        topPosition = 0;
    $(container).each(function () {

        $el = $(this);
        $($el).height('auto');
        topPostion = $el.position().top;

        if (currentRowStart != topPostion) {
            for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
                rowDivs[currentDiv].height(currentTallest);
            }
            rowDivs.length = 0; // empty the array
            currentRowStart = topPostion;
            currentTallest = $el.height();
            rowDivs.push($el);
        } else {
            rowDivs.push($el);
            currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
        }
        for (currentDiv = 0; currentDiv < rowDivs.length; currentDiv++) {
            rowDivs[currentDiv].height(currentTallest);
     }
    });
  };
 
}( jQuery ));

// Now call the plugin.

$(window).load(function () {
    equalheight('#Grid li');
});


$(window).resize(function () {
   equalheight('#Grid li');
});