4

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 Answers 3

5

You can use SLDS margin classes to set margins between rows. Either you can put it at top or bottom, here I have put it at the top using this class = slds-var-m-top_x-small, where m stands for margin and x-small is the scale that 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-var-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-var-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>Ï
2

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>
2
  • only supposed to use lwc components, no aura! Commented Oct 1, 2019 at 11:08
  • 1
    @LalitMehra, its not clear from your question., You should atleast add tags of LWC. Anyways, modified answer with LWC component Commented Oct 1, 2019 at 11:26
0

It's possible to do this using a vertical list instead of a grid. Apply the slds-list_vertical-space class to the ul element like this:

<ul class="slds-list_vertical-space">
  <li class="slds-item">
    First
  </li>
  <li class="slds-item">
    Second
  </li>
  <li class="slds-item">
    Third
  </li>
</ul>

More info here: https://www.lightningdesignsystem.com/utilities/vertical-list/#CSS-Class-Overview

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .