title: How to add gutters to pure-grid
body: <p>I need to add gutters to the pure-grid I'm using.
  Because I need that by default it should work just be the regular pure-grid css like this example:</p>
  
  <pre><code>&lt;div class="pure-g"&gt;
      &lt;div class="pure-u-1-2"&gt;
          &lt;label for="username"&gt;username&lt;/label&gt;
          &lt;input id="username" /&gt;
      &lt;/div&gt;
      &lt;div class="pure-u-1-2"&gt;
          &lt;label for="password"&gt;password&lt;/label&gt;
          &lt;input type="password" id="password" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I tried so far:</p>
  
  <pre><code>[class^="pure-u-"] {
      margin-right: 24pt;
      padding-right:12pt;
  }
  
  [class^="pure-u-"]:last-of-type {
      margin:0;
      padding:0;
  }
  </code></pre>
  
  <p>I also tried it whith <code>box-sizing</code> but it also didn't work:</p>
  
  <pre><code>[class^="pure-u-"] {
      box-sizing: border-box;
      margin-right:12pt;
  }
  </code></pre>
  
  <p>I also have to worry about browser supports. Not very but it would be great if old browser show them <em>right</em>.</p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/eQlXR.png" alt="Example what I have and what I want"></p>