Question

我是从SUITCSS背景来到Pure CSS（Yahoo!框架），我正在寻找一种将排水沟添加到多列网格的简洁方法。

我已经看过提到l-box技术，但找不到合适的例子。

这是我目前正在尝试的内容，添加了纯g-gutter类：

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

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

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

PureCSSers：你用什么来实现排水网格列？

Answer 1

当您可以为孩子添加保证金时，无需使用padding。

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

Answer 2

您需要对每个网格边框进行框大小调整并添加填充，以便内部内容在边框之间留出空间：

＆＃13;

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

＆＃13;

＆＃13; 每个网格列都有内部填充，以便列中的子div具有空间。向子div添加背景，以便显示空格。