Sizing : Sizing utilities allow for easy width sizing on an element.

 

<div class="demo-only demo-only--sizing slds-grid slds-wrap">
  <div class="slds-size_1-of-3">
    <div class="slds-box slds-box_x-small

        slds-text-align_center slds-m-around_x-small"> 

        .slds-size_1-of-3</div>
  </div>
  <div class="slds-size_1-of-3">
    <div class="slds-box slds-box_x-small 

           slds-text-align_center slds-m-around_x-small"> 

           .slds-size_1-of-3</div>
  </div>
  <div class="slds-size_1-of-3">
    <div class="slds-box slds-box_x-small 

      slds-text-align_center slds-m-around_x-small"> 

     .slds-size_1-of-3</div>
  </div>
  <div class="slds-size_1-of-3">
    <div class="slds-box slds-box_x-small slds-text-align_center

      slds-m-around_x-small">.slds-size_1-of-3</div>
  </div>
  <div class="slds-size_2-of-3">
    <div class="slds-box slds-box_x-small slds-text-align_center

      slds-m-around_x-small">.slds-size_2-of-3</div>
  </div>
  <div class="slds-size_3-of-3">
    <div class="slds-box slds-box_x-small slds-text-align_center 

      slds-m-around_x-small">.slds-size_3-of-3</div>
  </div>
</div>