I'm creating a form and using lightning:layout and giving the lightning:layoutItem a size of 4, which renders <div class="slds-size_4-of-12">. However, I noticed that the last column in the grid is slightly wider than the others, even though all divs have a class of slds-size_4-of-12

Here's a screenshot:

enter image description here

Here's the Lightning markup:

<div class="slds-p-bottom_small">
        <lightning:layoutItem size="4">
            <lightning:input aura:id="firstName" label="First name" name="firstName" />
        <lightning:layoutItem size="4">
            <lightning:input aura:id="middleInitial" label="Middle initial" name="middleInitial" maxlength="2" />
        <lightning:layoutItem size="4">
            <lightning:input aura:id="lastName" label="Last name" name="lastName" />

Do you know why that is, and how can I get all columns to be equal width?

  • please share your code – Itai Shmida Nov 11 '18 at 12:23
  • The code outputs equal widths, can you share the code that is behind the screenshot? – Skarpi Steinthorsson Jan 4 '19 at 11:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.