带有CSS的可见网格线

Question

我正在开发一个快速响应的网站。该网站在背景中有可见的网格线，您可以将其与此网格进行比较：http://fearonhay.com/（背景中非常柔和的灰色线条）。但是有一个区别，这使我有点难以找到解决它的最佳方法：网站响应（％宽度）。

我做了一个非常粗略的草稿，它应该是什么样子。实际上，不仅有三列而是四列：

我创建了一个快速小提琴（在Chrome中查看）进行测试，如果它按照我的意图运行：http://jsfiddle.net/T76MK/

.lines {
    background-image: -webkit-linear-gradient(0, black 1px, transparent 1px);
    background-size: 25% 100%; 
}
.grid {
    margin-left: -30px; /* Gutter */    
}
.grid__item {
    box-sizing: border-box;
    display: inline-block;
    padding-left: 30px; /* Gutter */
    vertical-align: top;    
}
.one-quarter { width: 25%; }
.red { background: red; }

正如您所看到的，我对线条使用了线性渐变，但第二和第四条线偏离了几个像素。它们没有在排水沟中正确居中。第三行看起来不错。任何想法如何解决这个问题？

提前致谢。

Answer 1

您的代码存在很多问题......

这就是我要做的事情：
http://jsfiddle.net/T76MK/7/

问题：你为什么在这里使用双下划线？不好...... .grid__item

此外，如果您需要那些排水沟（您不应该使用负余量），您可能希望查看其他网站/页面中的其他代码问题。