是否可以将此网格布局与display：table？ （边框间距不排列）

Question

这是codepen所以你可以看到。删除边框间距可以使所有内容都正确排列，但我需要在这些列之间放置水槽。

secrets.choice

我从https://codepen.io/anon/pen/LLYxZL获取了css，但当我自己尝试制作时，我遇到了同样的问题。

我需要顶行为25％25％25％25％宽度。下一行需要有两个25％和一个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;
    }