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>