Hi. How can we help?

Available Widths

13 Mar 2018 in: Grid System

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.


100%

10%

90%

20%

30%

50%

40%

30%

30%

60%

30%

10%

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