Grid (BETA)

  
<div class="row grid-center">
  <div class="col-xs-12">
    <div class="grid-example-block "><span>col-xs-12</span></div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-6">
    <div class="grid-example-block "><span>col-xs-6</span></div>
  </div>
  <div class="col-xs-6">
    <div class="grid-example-block "><span>col-xs-6</span></div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-4">
    <div class="grid-example-block "><span>col-xs-4</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block "><span>col-xs-4</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block "><span>col-xs-4</span></div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-3">
    <div class="grid-example-block "><span>col-xs-3</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block "><span>col-xs-3</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block "><span>col-xs-3</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block "><span>col-xs-3</span></div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-2">
    <div class="grid-example-block "><span>col-xs-2</span></div>
  </div>
</div>
  

  
<div class="row grid-center">
  <div class="col-xs-6 col-sm-8 col-md-4">
    <div class="grid-example-block ">
      <span>
        col-xs-6   col-sm-8   col-md-4
      </span>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-8">
    <div class="grid-example-block ">
      <span>
        col-xs-6   col-sm-4   col-md-8
      </span>
    </div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-3 col-sm-7">
    <div class="grid-example-block ">
      <span>
        col-xs-3   col-sm-7
      </span>
    </div>
  </div>
  <div class="col-xs-9 col-sm-5">
    <div class="grid-example-block ">
      <span>
        col-xs-9   col-sm-5
      </span>
    </div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-2 col-sm-4">
    <div class="grid-example-block ">
      <span>
        col-xs-2   col-sm-4
      </span>
    </div>
  </div>
  <div class="col-xs-4 col-sm-4">
    <div class="grid-example-block ">
      <span>
        col-xs-4   col-sm-4
      </span>
    </div>
  </div>
  <div class="col-xs-6 col-sm-4">
    <div class="grid-example-block ">
      <span>
        col-xs-6   col-sm-4
      </span>
    </div>
  </div>
</div>
<div class="row grid-center">
  <div class="col-xs-9 col-sm-4">
    <div class="grid-example-block ">
      <span>
        col-xs-9   col-sm-4
      </span
    ></div>
  </div>
  <div class="col-xs-3 col-sm-8">
    <div class="grid-example-block ">
      <span>
        col-xs-3   col-sm-8
      </span>
    </div>
  </div>
</div>
  

  
<div class="center"><span class="ui-text-small">grid-center</span></div>
<div class="row grid-center">
  <div class="col-xs-2">
    <div class="grid-example-block"><span>col-xs-2</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block"><span>col-xs-3</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block"><span>col-xs-3</span></div>
  </div>
</div>

<div class="center"><span class="ui-text-small">grid-start</span></div>
<div class="row grid-start">
  <div class="col-xs-4 grid-center">
    <div class="grid-example-block"><span>col-xs-4<br></span><span class="ui-text-smaller" style="color: #333;">Add class .grid-center for this col<br>(For centering col content)</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block"><span>.col-xs-4<br></span><span class="ui-text-smaller" style="color: #333;">Without class .grid-center<br>(col have parent class .grid-start)</span></div>
  </div>
</div>

<div class="center"><span class="ui-text-small">grid-end</span></div>
<div class="row grid-end">
  <div class="col-xs-6">
    <div class="grid-example-block"><span>.col-xs-6</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block"><span>.col-xs-4</span></div>
  </div>
</div>

<div class="center"><span class="ui-text-small">grid-reverse + grid-center</span></div>
<div class="row grid-reverse grid-center">
  <div class="col-xs-4">
    <div class="grid-example-block"><span>col-xs-4<br></span><span class="ui-text-smaller" style="color: #333;">This is block #1</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block"><span>col-xs-4<br></span><span class="ui-text-smaller" style="color: #333;">This is block #2</span></div>
  </div>
</div>

<div class="center"><span class="ui-text-small">grid-between</span></div>
<div class="row grid-between">
  <div class="col-xs-4">
    <div class="grid-example-block"><span>col-xs-4</span></div>
  </div>
  <div class="col-xs-4">
    <div class="grid-example-block"><span>col-xs-4</span></div>
  </div>
</div>

<div class="center"><span class="ui-text-small">grid-around</span></div>
<div class="row grid-reverse grid-around">
  <div class="col-xs-3">
    <div class="grid-example-block"><span>col-xs-3</span></div>
  </div>
  <div class="col-xs-3">
    <div class="grid-example-block"><span>col-xs-3</span></div>
  </div>