Basic columns - available widths

Available column widths are: 10,20,30,40,50,60,70,80,90 and 100%. You can mix and match them to add up to 100, inside a row. If you go over 100, there will be a break in your floats.

<div class="row demo half-gutters">
  <div class="columns demo screen-100 tablet-100 mobile-100 phone-100"> 100% </div>
</div>
<div class="row demo half-gutters">
  <div class="columns demo screen-10 tablet-10 mobile-50 phone-100"> 10% </div>
  <div class="columns demo screen-90 tablet-90 mobile-50 phone-100"> 90% </div>
</div>
<div class="row demo half-gutters">
  <div class="columns demo screen-20 tablet-20 mobile-30 phone-100"> 20% </div>
  <div class="columns demo screen-30 tablet-30 mobile-30 phone-100"> 30% </div>
  <div class="columns demo screen-50 tablet-50 mobile-40 phone-100"> 50% </div>
</div>
<div class="row demo half-gutters">
  <div class="columns demo screen-40 tablet-40 mobile-30 phone-100"> 40% </div>
  <div class="columns demo screen-30 tablet-30 mobile-30 phone-100"> 30% </div>
  <div class="columns demo screen-30 tablet-40 mobile-40 phone-100"> 30% </div>
</div>
<div class="row demo half-gutters">
  <div class="columns demo screen-60 tablet-60 mobile-30 phone-100"> 60% </div>
  <div class="columns demo screen-30 tablet-30 mobile-30 phone-100"> 30% </div>
  <div class="columns demo screen-10 tablet-10 mobile-40 phone-100"> 10% </div>
</div>