带有 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

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