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：你用什么来实现网格列？

score 7 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

每个网格列内部都有填充，因此列中的子 div 将有空间。为子 div 添加背景，以便显示空间。

在我的 codepen 上查看它：http: //codepen.io/ecupaio/pen/bpWJMr

2 回答 2