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:
Source: https://www.lightningdesignsystem.com/components/utilities/grid/
So you may remove the slds-col--padded class and add
slds-p-left--small
andslds-p-right--small
classes instead to the div.So your component code would look like this: