title: Visible grid lines with CSS
body: <p>I'm working on a responsive website. The website has visible grid lines in the background, you can compare it to this one: <a href="http://fearonhay.com/" rel="nofollow noreferrer">http://fearonhay.com/</a> (very soft grey lines in the background). But there is one difference, which makes it a little harder for me to figure out the best way to solve it: The website is responsive (% widths).</p>
  
  <p>I made a very rough draft, how it should look like. Actually there are not only three columns but four:</p>
  
  <p><img src="https://i.stack.imgur.com/oyXal.jpg" alt="Grid"></p>
  
  <p>I created a quick fiddle (look at it in Chrome) to test, if it works the way I intented: <a href="http://jsfiddle.net/T76MK/" rel="nofollow noreferrer">http://jsfiddle.net/T76MK/</a></p>
  
  <pre><code>.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; }
  </code></pre>
  
  <p>As you can see I used a linear gradient for the lines, but the the second and fourth line are off by a few pixels. They aren't properly centered within the gutter. The third line looks fine though. Any ideas how to fix this?</p>
  
  <p>Thanks in advance.</p>