html - 可见的网格线与 CSS

Question

我正在开发响应式网站。该网站在背景中有明显的网格线，您可以将其与此进行比较:http://fearonhay.com/ (背景中非常柔和的灰色线条)。但有一个区别，这让我更难找出解决它的最佳方法:该网站是响应式的(宽度百分比)。

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

我创建了一个快速 fiddle (在 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

此外，如果您需要这些排水沟(您永远不应为其使用负边距)，您可能需要查看网站/页面其余部分的其他代码问题。