How to add gutters to pure-grid

Question

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:

<div class="pure-g">
    <div class="pure-u-1-2">
        <label for="username">username</label>
        <input id="username" />
    </div>
    <div class="pure-u-1-2">
        <label for="password">password</label>
        <input type="password" id="password" />
    </div>
</div>

What I tried so far:

[class^="pure-u-"] {
    margin-right: 24pt;
    padding-right:12pt;
}

[class^="pure-u-"]:last-of-type {
    margin:0;
    padding:0;
}

I also tried it whith box-sizing but it also didn't work:

[class^="pure-u-"] {
    box-sizing: border-box;
    margin-right:12pt;
}

I also have to worry about browser supports. Not very but it would be great if old browser show them right.

---

Answer 1

Update:

I found a massively better way to do this that's also much easier.

/* Add a gutter to Pure's Columns */
.pure-g {
  margin: 0 -1em;
}

.pure-g > div {
  padding: 0 1em;
}

That's it. Easier to read bottom to top: Add 1em of spacing on the left and right of all div children of pure-g divs. Then on the pure-g container, subtract 1em from the left and right. Canceling out the padding from the first and last pure-u-whatever.

Why is this better?

Because you won't end up with wonky padding if you have three of pure-u-1-2 in a row.

---

Just add a left and right padding on all direct child divs of pure-g (which must be pure-u-blah classes if you follow the spec). Then remove the left padding on the first one, and the right padding on the last one.

Ideally I'd have used margin so the background styles would also be spaced out, but I couldn't get that working. Also the first and last columns will be slightly wider than any middle ones since they have one less gutter.

.pure-g > div {
  padding: 0 1em;
}

.pure-g > div:first-child {
  padding-left: 0;
}

.pure-g > div:last-child {
  padding-right: 0;
}

A good tip for troubleshooting layouts like this is to add the following line to your CSS:

* { box-shadow: 0 0 1px red; }

This will add a faint red border around everything without changing the layout like a border rule would.

If the columns stack vertically with this code check your box-sizing. Pure doesn't set it for the grid oddly. I always have this set for * in a reset.css file somewhere.

.pure-g > div {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Answer 2

Can you add a class to the input field like in the Mulit-Column Form example? http://purecss.io/forms/#multi-column-form-with-pure-grids

<input id="first-name" class="pure-u-23-24" type="text">

Answer 3

This works for me:

.pure-g > div
{
    box-sizing: border-box;
}
.pure-g > div:first-child
{
    padding-right: 12pt;
}
.pure-g > div:last-child
{
    padding-left: 12pt;
}
.pure-g > div :not(:first-child):not(:last-child)
{
    padding: 0 12pt;
}