在没有填充的自定义网格中添加排水沟

Question

所以我一直在与这种情况作斗争。
标记

<div id="container">
        <div class="grid">
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
                </div>
            </div>
            <div class="col-1-2">
                <div class="module">
                    <h3>1/2</h3>
                </div>
            </div>
            <div class="col-1-4">
                <div class="module">
                    <h3>1/4</h3>
            </div>
         </div>
 </div>

CSS

 *{
     box-sizing :  border-box;
 }
 [class *="col"]{
      float : left;
      height : auto;
      overflow: hidden;
 }
 .col-1-2{
      width : 50%;
 }

.col-1-4{
   width : 25%;
 }

#container{
    width : 960px;
    padding : 20px;
    margin : 10px auto 0 auto;
}

.module {
  padding: 20px;
  background: #eee;
  font-family: sans-serif; 
}

这会使列正确并排显示。但是两端相互折叠，整个东西看起来像一个大矩形。

现在，我尝试通过 编辑 [class*="col"] 的现有 CSS 样式并将 padding-right : 20px 添加到其中

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-right : 20px;
}

现在一切看起来像

我已经设法放入了排水沟，但如果你仔细观察，三个灰色矩形不在容器 div 内居中，它们更多地被推向右侧。
如何解决这种情况？如果有人建议一种更好的方法来添加排水沟，那将非常有帮助。
谢谢
（图片中的蓝色突出显示列的实际大小）

Answer 1

您可以在块的左右边框上添加填充

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding : 0 10px;
}

和

#container{
    padding:10px;
}

Answer 2

请尝试如下更改您的 CSS

[class *="col"]{
    float : left;
    height : auto;
    overflow: hidden;
    padding-left: 20px;
}

将以下内容添加到您的 CSS 中

[class *="col"]:first-child{
     padding-left : 0px;
}