0

Is there a way to vertically provide some gutter between the rows in a grid? Currently there is a gutter option but only for columns. I am following this article for reference

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

This is what I have done so far .. I am using custom css to provide space between the two buttons

    <div class="slds-grid slds-grid_vertical">
        <div class="slds-col slds-col--padded slds-size_10-of-12 slds-align_absolute-center" style="margin-bottom: 1%">
            <lightning-button variant="brand" label="Button1" title="Button1" onclick={handleClick} class="slds-button slds-button_brand slds-button_stretch"></lightning-button><br>
        </div>
        <div></div>
        <div class="slds-col slds-col--padded slds-size_10-of-12 slds-align_absolute-center">
            <lightning-button variant="brand" label="Button2" title="Button2" onclick={handleClick} class="slds-button slds-button_neutral slds-button_stretch"></lightning-button>
        </div>
    </div>Ï
3

You can use SLDS margin classes to set margin between rows. Either you can put it at top or bottom, here I have put at the top using this class = slds-m-top_x-small, where m stands for margin and x-small is the scale which defines the size of the margin.

You can know more about SLDS margin here

<div class="slds-grid slds-grid_vertical">
    <div class="slds-col slds-col--padded slds-size_10-of-12 slds-align_absolute-center" >
        <lightning-button variant="brand" label="Button1" title="Button1" onclick={handleClick} class="slds-button slds-button_brand slds-button_stretch slds-m-top_x-small"></lightning-button><br>
    </div>
    <div></div>
    <div class="slds-col slds-col--padded slds-size_10-of-12 slds-align_absolute-center slds-m-top_x-small">
        <lightning-button variant="brand" label="Button2" title="Button2" onclick={handleClick} class="slds-button slds-button_neutral slds-button_stretch"></lightning-button>
    </div>
</div>Ï
1

I would recommend to use lightning-layout instead of slds-grid. In this, padding="around-small" will add space around the content of cell - both horizontal and vertical.

Sample:

<div class="c-container">
    <lightning-layout>
        <lightning-layout-item padding="around-small">
            <div class="header-column">
                <p class="field-title" title="Field 1">Field 1</p>
                <p>Name</p>
            </div>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <div class="header-column">
                <p class="field-title" title="Field2 (3)">Field 2 (3)
                    <lightning-button-icon icon-name="utility:down" variant="border-filled" size="small" alternative-text="More Actions"></lightning-button-icon>
                </p>
                <p>Eligibility</p>
            </div>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <div class="header-column">
                <p class="field-title" title="Field 3">Field 3</p>
                <a href="#">Website</a>
            </div>
        </lightning-layout-item>
        <lightning-layout-item padding="around-small">
            <div class="header-column">
                <p class="field-title" title="Field 4">Field 4</p>
                <p>
                    <span title="">Address</span>
                </p>
            </div>
        </lightning-layout-item>
    </lightning-layout>
</div>
  • only supposed to use lwc components, no aura! – Lalit Mehra Oct 1 at 11:08
  • 1
    @LalitMehra, its not clear from your question., You should atleast add tags of LWC. Anyways, modified answer with LWC component – salesforce-sas Oct 1 at 11:26

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.