1

The slds-gutters class does not seem to add spacing between the div's. What is the reason for this? Essentially I could add padding, but I would like to understand why there is no spacing between the div's when using slds-gutters. I've provided an image for reference. Is gutters not the equivalent of gap in cssgrid?

enter image description here

MARKUP

<aura:component implements="force:appHostable">    

<p>Grid App</p>    

<!-- 4 div's with spacing between eachother -->
<div class="slds-grid slds-gutters">
  <div style="background-color:green;" class="slds-col">
    <span>1</span>
  </div>
  <div style="background-color:yellow;" class="slds-col">
    <span>2</span>
  </div>
  <div style="background-color:green;" class="slds-col">
    <span>3</span>
  </div>
  <div style="background-color:yellow;" class="slds-col">
    <span>4</span>
  </div>
</div>  

1

No, it's not the same as the CSS gap. Instead, it provides an additional 12px of padding on the left and right sides, which appears inside the div's box. Here's your example, modified to show the difference:

Comparison of slds-gutter

<aura:application extends="force:slds">
    <h1>With Gutters</h1>
    <div class="slds-grid slds-gutters">
        <div style="background: pink" class="slds-col">
            <span>1</span>
        </div>
        <div style="background: lightblue" class="slds-col">
            <span>2</span>
        </div>
        <div style="background: pink" class="slds-col">
            <span>3</span>
        </div>
        <div style="background: lightblue" class="slds-col">
            <span>4</span>
        </div>
    </div>
    <h1>Without Gutters</h1>
    <div class="slds-grid">
        <div style="background: pink" class="slds-col">
            <span>1</span>
        </div>
        <div style="background: lightblue" class="slds-col">
            <span>2</span>
        </div>
        <div style="background: pink" class="slds-col">
            <span>3</span>
        </div>
        <div style="background: lightblue" class="slds-col">
            <span>4</span>
        </div>
    </div>
</aura:application>
0

The following seems to work (I am not sure why the original code does not add the padding).


<aura:component implements="force:appHostable">    

<p>Grid App</p>    

<!-- 4 div's with spacing between eachother -->
<div class="slds-grid slds-gutters">
  <div class="slds-col">
    <div style="background-color:green;">1</div>
  </div>
  <div class="slds-col">
    <div style="background-color:yellow;">2</div>
  </div>
  <div class="slds-col">
    <div style="background-color:green;">3</div>
  </div>
  <div class="slds-col">
    <div style="background-color:yellow;">4</div>
  </div>
</div>
</aura:component>

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.