A CodePen by LukyVJ.

index.html

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/base-min.css">
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/grids-min.css">

<h1>Purecss.io Grid system</h1>
<div class="pure-g">
    <!-- One --> 
    <div class="pure-u-1">    
        <p>One</p>
    </div>

     <!-- Twice --> 
    <div class="pure-u-1-2">    
        <p>Twice</p>
    </div>

    <div class="pure-u-1-2">
        <p>Thirds</p>
    </div>

  <!-- Third --> 
    <div class="pure-u-1-3">    
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>

    <div class="pure-u-1-3">
        <p>Thirds</p>
    </div>
   <!-- Fourth --> 
  <div class="pure-u-1-4">     
        <p>Fourth</p>
    </div>

    <div class="pure-u-1-4">
        <p>Fourth</p>
    </div>

    <div class="pure-u-1-4">
        <p>Fourth</p>
    </div>
  <div class="pure-u-1-4">
        <p>Fourth</p>
    </div>
 <!-- Fifth --> 
  <div class="pure-u-1-5">   
        <p>Fifth</p>
    </div>

    <div class="pure-u-1-5">
        <p>Fifth</p>
    </div>

    <div class="pure-u-1-5">
        <p>Fifth</p>
    </div>
  <div class="pure-u-1-5">
        <p>Fifth</p>
    </div>
   <div class="pure-u-1-5">
        <p>Fifth</p>
    </div>
  <!-- Sixth --> 
  <div class="pure-u-1-6">   
        <p>Sixth</p>
    </div>
    <div class="pure-u-1-6">
        <p>Sixth</p>
    </div>
    <div class="pure-u-1-6">
        <p>Sixth</p>
    </div>
  <div class="pure-u-1-6">
        <p>Sixth</p>
    </div>
   <div class="pure-u-1-6">
        <p>Sixth</p>
    </div>
   <div class="pure-u-1-6">
        <p>Sixth</p>
    </div>
<!-- Eight --> 
  <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>
   <div class="pure-u-1-8">   
        <p>Eight</p>
    </div>

</div>

<h1>Random samples</h1>
<div class="pure-g">
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
    <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
  <div class="pure-u-1-4">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
    <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
  
  <div class="pure-u-1-2">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
    <div class="pure-u-1-4">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
   <div class="pure-u-1-2">   
        <p> </p>
    </div>
 
   <div class="pure-u-1-6">   
        <p> </p>
    </div>
   <div class="pure-u-1-6">   
        <p> </p>
    </div>
   <div class="pure-u-1-6">   
        <p> </p>
    </div>
   <div class="pure-u-1-8">   
        <p> </p>
    </div>
  <div class="pure-u-1-8">   
        <p> </p>
    </div>
   <div class="pure-u-1-4">   
        <p> </p>
    </div>
    <div class="pure-u-1-2">   
        <p> </p>
    </div>
    <div class="pure-u-1-2">   
        <p> </p>
    </div>
    <div class="pure-u-1-3">   
        <p> </p>
    </div>
   <div class="pure-u-1-2">   
        <p> </p>
    </div>
  <div class="pure-u-1-6">   
        <p> </p>
    </div>
   <div class="pure-u-1-6">   
        <p> </p>
    </div>
   <div class="pure-u-1-2">   
        <p> </p>
    </div>
  <div class="pure-u-1-3">   
        <p> </p>
    </div>
</div>

Purecssio-grid-system.markdown

Purecssio grid system

Just a showcase of the purecss.io grid system.

A Pen by LukyVJ on CodePen.

License.

script.js

/*
* Purecss.io grid system showcase.
*
* 2013 @LukyVj
*/

style.css

h1{
  font-family:helvetica;
  padding:0 .3em;
  font-weight:400;
  color:#1f8dd6
}
.pure-g {
  width:98%;
  padding:.5em;
}
.pure-g div{background:#eee;margin:0em;box-shadow:inset 0 0 0 3px #fff;text-align:center}
.pure-g div:hover{background:#1f8dd6;color:#fff}
.pure-g div:nth-child(1){
  padding:1px;
}

  .pure-g > div {
        box-sizing: border-box; 
    }
    .sidebar {
        padding: 0.5em; 
        border-right: 2px solid #777;
    }
    .main {
        padding: 0.75em 0.5em; 
    }