css - 扩展纯 css 网格以具有装订线的最佳方法

Question

我从 SUITCSS 背景转向 Pure CSS(Yahoo! 框架)，正在寻找一种向多列网格添加间距的简洁方法。

我看到有人提到 l-box 技术，但找不到合适的例子。

这是我目前正在尝试的，通过添加 pure-g--gutter 类:

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

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

不幸的是，虽然这似乎确实按预期设置了边距和填充，但它也会导致网格将第二列(共两列)重排到下一行。

PureCSSers:您使用什么来实现分隔网格列？

Answer 1

当您可以为 child 添加边距时，就没有必要使用padding。

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