我正在使用纯 CSS 来布局网站，但遇到了问题。如果嵌套网格元素之间存在任何空格，则会破坏布局并将最后一个 div 推到下一行。我创建了一个测试网站，内容尽可能少，以测试是否只有我一个人这样做，但我仍然遇到了问题。
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-2">
<div class="pure-u-1-3">
<p>Hello world</p>
</div>
<div class="pure-u-1-3">
<p>Hello</p>
</div>
<div class="pure-u-1-3">
<p>Hey there</p>
</div>
</div>
<div class="pure-u-1-2">
<p>Hi :)</p>
</div>
</div>
</body>
</html>
This code results in this: 
如果我从 div 之间取出空白，如
<div class="pure-u-1-3"><p>Hello world</p></div><div class="pure-u-1-3"><p>Hello</p></div><div class="pure-u-1-3"><p>Hey there</p></div>
它会自行修复：
Chrome 和 Firefox 中都会出现此问题。这是纯 CSS 的问题，还是我做错了什么？
编辑：我找到了一个特定于 YUI Pure CSS 的解决方案。要嵌套布局，每组列都需要位于自己的位置.pure-g分区我把这个更详细地放在Github问题 https://github.com/yui/pure/issues/333#issuecomment-44613572.
这对于inline-block元素。将它们注释掉：
<div class="pure-u-1-2"><!--
--><div class="pure-u-1-3"><p>Hello world</p></div><!--
--><div class="pure-u-1-3"><p>Hello</p></div><!--
--><div class="pure-u-1-3"><p>Hey there</p></div>
</div>