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

css, yui-pure-css

Solution

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

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

Problem

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?

Original source