扩展纯 CSS 网格以拥有排水沟的最佳方法答案

【问题标题】：Best way to extend pure-css's grid to have gutters扩展纯 CSS 网格以拥有排水沟的最佳方法
【发布时间】：2014-07-05 23:23:34
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您需要为每个网格边框设置 box-sizing 并添加填充，以便内部内容在边框之间留出空间：

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

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

【讨论】：

这就像一个魅力！在我的父包装器中快速轻松地添加类
CSS .grid-padding.pure-g > div[class*="pure-u- "] {...} 查看 codepen 解决方案