slds-gutters not adding spacing between div's

Question

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?

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>  

Answer 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:

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

Answer 2

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>