Displaying Data in multiple columns in lightning Component

We have seen how to display data in 2 column layout in the previous post.
see Display Data in 2 column Layout .
To display data in 3- column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
</div>
</div>
</div>
To display data in 4 - column layout the structure will be like this
<div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-4">
</div>
</div>
</div>
Example to display data in 3 -column layout :
Note:I was just modifying AccountCreation.cmp component of previous post.
Remaining components will be same.
AccountCreation.cmp
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes,flexipage:availableForAllPageTypes" controller="AccountController">
     <aura:attribute name="newAccount" type="Account"
                    default="{ 'sobjectType': 'Account'                            
                             }"/>
    <!-- PAGE HEADER -->
    <div class="slds-page-header" role="banner">
        <div class="slds-grid">
            <div class="slds-col">
                <p class="slds-text-heading--label">Account</p>
                <h1 class="slds-text-heading--medium">My Account</h1>
            </div>
        </div>
    </div>
    <!-- / PAGE HEADER -->
    <!-- NEW Account FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        <div aria-labelledby="Accountform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--large">
                <legend id="Accountform" class="slds-text-heading--small
                                                       slds-p-vertical--medium">
                    Add Account
                </legend>
                <!-- CREATE NEW Account FORM -->
                <form class="slds-form--stacked">
                <div class="slds">
<div class="slds-grid slds-wrap">
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">

<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.Name}"
 />
</div>
                        </div>
                       
                        <div class="slds-form-element">
                          <div class="slds-form-element__control">
                              <ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
                                  class="slds-input"
                                  labelClass="slds-form-element__label"
                                  value="{!v.newAccount.ksk__SLAExpirationDate__c}"
                                  displayDatePicker="true"/>
                          </div>
                      </div>


</div>
                    <div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">

<div class="slds-form-element slds-is-required">
<div class="slds-form-element__control">
<ui:inputText aura:id="account Name" label="Account Name"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.Name}"
 />
</div>
                        </div>
                       
                        <div class="slds-form-element">
                          <div class="slds-form-element__control">
                              <ui:inputDate aura:id="accountSLADate" label="SLA Expiration Date"
                                  class="slds-input"
                                  labelClass="slds-form-element__label"
                                  value="{!v.newAccount.ksk__SLAExpirationDate__c}"
                                  displayDatePicker="true"/>
                          </div>
                      </div>


</div>
<div class="slds-col--padded slds-size--1-of-1 slds-medium-size--1-of-3">
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="Site"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__Site}"
 />
</div>
<div class="slds-form-element__control">
<ui:inputText aura:id="expname" label="SIC Description"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__SicDesc}"
 />
</div>

<div class="slds-form-element__control">
<ui:inputText aura:id="accountSerialNumber" label="SLA Serial Number"
 class="slds-input"
 labelClass="slds-form-element__label"
 value="{!v.newAccount.ksk__SLASerialNumber__c}"
 />
</div>
</div>
</div>
</div>  
<div class="slds-form-element">
<ui:button label="Create Account"
  class="slds-button slds-button--brand"
  press="{!c.clickCreateAccount}"/>
</div>
            </form>
            <!-- / CREATE NEW Account FORM -->
            </fieldset>
            <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW Account -->
    </div>
    <!-- / NEW Account FORM -->
   
</aura:component>

Output: