Search code examples
cssyui-pure-css

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

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?

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;
}