[SalesForce] columns flexing to occupy empty space in Lightning Design System

I have created a grid which should accept 3 columns of size 1 of 3.

The issue is, if i create only two columns they stretch to occupy full space rather than leaving an empty space for the column not created.

How to i achieve this?

I have already tried adding a dummy column at the end to restrict this behavior but is there a better way to do this via LDS styling class?

Here Goes the code:

<apex:page showHeader="false" standardStylesheets="true" sidebar="false" applyHtmlTag="false" applyBodyTag="false"  docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <apex:stylesheet value="{!URLFOR($Resource.SLDS090,'assets/styles/salesforce-lightning-design-system-vf.css')}"/>
    </head>
    <body>
      <!-- REQUIRED SLDS WRAPPER -->
        <div class="slds">

            <div class="slds-grid ">
                <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " >
                            <div class="slds-form-element is-required">
                                <label class="slds-form-element__label " for="something">
                                    <abbr class="slds-required" title="required">*</abbr>
                                    Bang Bang
                                </label>
                                <div class="slds-form-element__control ">
                                    <input id="something" class="slds-input" type="text" maxlength="20" required=""/>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " >
                            <div class="slds-form-element  ">
                                <label class="slds-form-element__label " for="hola">hola</label>
                                <div class="slds-form-element__control ">
                                    <textarea id="hola" class="slds-textarea" type="text" maxlength="255"/>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="slds-col--padded slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 ">
                        </div> -->
            </div>
        </div>
    </body>
</html>

Best Answer

It's because you've added slds-col--padded class in the grid DOM elements.

According to Salesforce Lightning Design System:

By default, the grid items within a .slds-grid do not stretch to take up that available white-space on the main axis.

Apply .slds-col to a grid item, it will stretch across the main axis. The width of each grid item will be determined by the content within that region.

Source: https://www.lightningdesignsystem.com/components/utilities/grid/

So you may remove the slds-col--padded class and add slds-p-left--small and slds-p-right--small classes instead to the div.

So your component code would look like this:

<div class="slds-grid ">
    <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " >
        <div class="slds-form-element is-required">
            <label class="slds-form-element__label " for="something">
                <abbr class="slds-required" title="required">*</abbr>
                Bang Bang
            </label>
            <div class="slds-form-element__control ">
                <input id="something" class="slds-input" type="text" maxlength="20" required=""/>
            </div>
        </div>
    </div>
    <div class="slds-p-left--small slds-p-right--small slds-size--1-of-3 slds-small-size--1-of-1 slds-medium-size--2-of-6 slds-large-size--4-of-12 " >
        <div class="slds-form-element  ">
            <label class="slds-form-element__label " for="hola">hola</label>
            <div class="slds-form-element__control ">
                <textarea id="hola" class="slds-textarea" type="text" maxlength="255"/>
            </div>
        </div>
    </div>                  
</div>
Related Topic