Css 是否可以将此网格布局与display:table一起使用？（边框间距未对齐行）

这是密码笔，你可以看到。删除边框间距可以使所有内容正确对齐，但我需要在这些列之间设置排水沟

我从中获取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;
    }

3.
3.
3.
3.
3.
3.
6.
//
//容器
//
.电网{
边缘底部：20px；
}
上校{
边框：实心1px#ccc；
填充：20px；
}
//保存并集中站点内容
.集装箱{
最大宽度：940px；
右边距：自动；
左边距：自动；
}
.grid-example.col{
线高：3；
文本对齐：居中；
颜色：#333；
背景色：rgba（255,0,0,15）；
}
//
//网格类
//
@介质（最小宽度：600px）{
//为表格添加“.grid”
.电网{
显示：表格；
宽度：100%；
表布局：固定；
}
//为表格单元格或列添加“.col”
上校{
显示：表格单元格；
}
//填充柱
.网格填充{
左边距：-1em；
右边距：-1rem；
}
.网格填充.网格{
边界间距：1rem 0；
}
}
@介质（最小宽度：600px）{
.col-1{宽度：8.333333%；}
.col-2{宽度：16.66666 7%；}
.col-3{宽度：25%；}
.col-4{宽度：33.333333%；}
.col-5{宽度：41.66666 7%；}
.col-6{宽度：50%；}
.col-7{宽度：58.333333%；}
.col-8{宽度：66.666 7%；}
.col-9{宽度：75%；}
.col-10{宽度：83.333333%；}
.col-11{宽度：91.66666 7%；}
}
//垂直居中栅格内容
//
//要求列中的内容为内联或内联块。
.grid对齐中间.col{
垂直对齐：中间对齐；
}
//
//反向列排序
//
.网格反转{
方向：rtl；
}
.grid reverse.col{
方向：ltr；
}

可能不是问题所在，但需要考虑的是一件重要的事情：我只是把它扔进了codepen，这样我就可以轻松地与大家分享了。另外，这是一种无礼的行为，所以不会引起问题。