slds-gutters not adding spacing between div's

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>