Best way to extend pure-css's grid to have gutters

Question

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.

I've seen mention of the l-box technique, but can't find a decent example of it.

Here's what I'm currently trying, by adding the pure-g--gutter class:

.pure-g .pure-g--gutter {
  margin: 0 -0.5rem;
}

.pure-g .pure-g--gutter > div {
  padding: 0 0.5rem;
}

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.

PureCSSers: What do you use to achieve guttered grid columns?

Answer 1

It's unnecessary to use padding when you can add margin to the children.

.pure-g .pure-g--gutter > div > * {
    margin: 0 0.5rem;
}

Answer 2

You need to make the box-sizing of each grid border-box and add padding so that the inner content leaves space between the borders:

.pure-g > div[class*="pure-u-"] {
  padding: 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Each grid column has padding inside so that child div in the colum will have space. Add a background to the child div so the space shows.

Check it out in action on my codepen: http://codepen.io/ecupaio/pen/bpWJMr