SCSS : How to use grid and gutter in foundation 6

Foundation for Sites
#1

I don’t understand foundation’s document. I understand a little bit about building grids. Because there are not enough examples of how to use sass. In the past, I solved the problem by creating another method. But I read document there is a way to use it about gutter. But I don’t know how to use it.

I have the html files.

        <div class="workforce-panel">
            <div class="workfoce-dept">dept 1</div>             
            <div class="workfoce-dept">dept 2</div>
            <div class="workfoce-dept">dept 3</div>
            <div class="workfoce-dept">dept 4</div>
            <div class="workfoce-dept">dept 5</div>
            <div class="workfoce-dept">dept 6</div>
        </div>

I want to building a grid with 2 columns per row. And I want each square box There are spacing with each other.I want the width of the padding to be 10px.

So I have a SCSS file to be able to generate CSS like this:

div.workforce-panel{
    @include grid-row();
    margin-top: 1em;
    background-color: #444;

    div.workfoce-dept{          
        @include grid-column(6,10px);           
        background-color: #fff;
    }
}

But that’s not what I want. How can I solve the problem?