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

我从SUITCSS的背景开始学习Pure CSS(Yahoo!框架)，并且正在寻找一种向多列网格添加装订线的灵巧方法。

我看到过提到L盒技术的情况，但是找不到一个不错的例子。

这是我目前正在尝试的方法，添加了pure-g--gutter类:

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

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

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

PureCSSers:您使用什么来获得有条理的网格列？

最佳答案

当您可以向子级添加边距时，无需使用padding。

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

关于css - 扩展纯CSS网格以具有装订线的最佳方法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24591365/