Fluid Grid Using Text-align: Justify

Fluid-Grid-Using-Text-align:-Justify.markdown

Fluid Grid Using Text-align: Justify

A new technique for responsive grids I've been working on which uses inline-block and text-align: justify.

Take a look at this article for an explanation of the fundamentals of the technique:

http://www.barrelny.com/blog/text-align-justify-and-rwd/

Essentially, margins are calculated by the browser and never specified in the CSS. This saves a lot of tedious work! Also by not having to use floats, clearfixes, or nth-child, we avoid many common problems associated with more traditional methods.

A Pen by patrickkunka on CodePen.

License.

index.html

<h1>Fluid Grid using text-align: justify</h1>

<!-- FLUID GRID -->

<ul id="Grid">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="placeholder"></li>
</ul>

<!-- LEGEND -->

<p>Resize the grid to see how the elements reflow based on the new column-widths defined in the media queries.<br/>
  <strong>There is no need to ever define horizontal margins/floats/or clear-fixes.</strong></p>

  
<label>Placeholder/gap element*</label>
<label>Break element*</label>
  
<p><em>*These elements are visible only for demonstration purposes and should be hidden in production by removing the borders.</em></p>

<p>More info here: <a target="_blank" href="http://www.barrelny.com/blog/text-align-justify-and-rwd/">here</a></p>

style.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 li{
  display: inline-block;
  background: #eee;
  width: 23%;
  padding-top: 23%; /* Used instead of height to give elements fluid, width-based height */
  margin-bottom: 2.5%;
}

#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 */
}

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

/* 3 COL */

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

/* 2 COL */

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

/* SINGLE COL */

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


/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */

h1{
  font: 600 20px "Helvetica Neue";
  text-align: right;
  text-transform: uppercase;
}

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;
}