title: Best way to extend pure-css's grid to have gutters
body: <p>I'm coming to Pure CSS (the Yahoo! framework) from a SUITCSS background and am looking for a neat way to add gutters to multi-column grids.</p>
  
  <p>I've seen mention of the l-box technique, but can't find a decent example of it.</p>
  
  <p>Here's what I'm currently trying, by adding the pure-g--gutter class:</p>
  
  <pre><code>.pure-g .pure-g--gutter {
    margin: 0 -0.5rem;
  }
  
  .pure-g .pure-g--gutter &gt; div {
    padding: 0 0.5rem;
  }
  </code></pre>
  
  <p>Unfortunately, while this does appear to set the margins and padding as expected, it also causes the grid to reflow the second column (of two) onto the next line.</p>
  
  <p>PureCSSers: What do you use to achieve guttered grid columns?</p>