Is it possible to have this grid layout with display:table? (border-spacing not lining up rows)

Question

Here is the codepen so you can see. Removing border spacing makes everything line up correctly, but I need gutters between these columns.

https://codepen.io/anon/pen/LLYxZL

I took the css from: https://github.com/mdo/table-grid but when I tried to make this myself, I ran into the same issue.

I need the top row to be 25% 25% 25% 25% width. The next row needs to have two 25% and one 50%.

<div class="grid-padded">
  <div class="grid">
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
    <div class="col col-3">3</div>
  </div>
</div>
<div class="grid-padded">
<div class="grid">
  <div class="col col-3">3</div>
  <div class="col col-3">3</div>
  <div class="col col-6">6</div>

</div>

</div>

  //
  // Container
  //

    .grid {
      margin-bottom:20px;
    }

    .col {
      border:solid 1px #ccc;
      padding:20px;
    }

    // Holds and centers the site content
    .container {
      max-width: 940px;
      margin-right: auto;
      margin-left: auto;
    }

    .grid-example .col {
        line-height: 3;
        text-align: center;
        color: #333;
        background-color: rgba(255,0,0,.15);
    }
    //
    // Grid classes
    //

    @media (min-width: 600px) {
      // Add `.grid` for the table
      .grid {
        display: table;
        width: 100%;
        table-layout: fixed;
      }

      // Add `.col` for the table cells, or columns
      .col {
        display: table-cell;
      }

      // Padded columns
      .grid-padded {
        margin-left:  -1rem;
        margin-right: -1rem;
      }
      .grid-padded .grid {
        border-spacing: 1rem 0;
      }
    }

    @media (min-width: 600px) {
      .col-1 { width: 8.333333%; }
      .col-2 { width: 16.666667%; }
      .col-3 { width: 25%; }
      .col-4 { width: 33.333333%; }
      .col-5 { width: 41.666667%; }
      .col-6 { width: 50%; }
      .col-7 { width: 58.333333%; }
      .col-8 { width: 66.666667%; }
      .col-9 { width: 75%; }
      .col-10 { width: 83.333333%; }
      .col-11 { width: 91.666667%; }
    }

    // Vertically center grid content
    //
    // Requires content within the column to be inline or inline-block.

    .grid-align-middle .col {
      vertical-align: middle;
    }


    //
    // Reverse column sorting
    //

    .grid-reverse {
      direction: rtl;
    }

    .grid-reverse .col {
      direction: ltr;
    }