I am currently utilizing Pure CSS to design a website, but I have encountered an issue. Whenever there is white space between nested grid elements, it disrupts the layout and causes the last div to move onto the next line. In order to troubleshoot this problem, I set up a test site with minimal content just to check if it was an isolated incident, but unfortunately, I am still facing the same dilemma.
<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 piece of code leads to the following outcome:
If I remove the white space in between the divs, like so
<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>
the issue resolves itself:
This particular problem is observed on both Chrome and Firefox. Is this a flaw in Pure CSS, or am I making a critical mistake somewhere?
EDIT: I came across a solution specific to YUI Pure CSS. For nesting layouts, each column set has to be enclosed within its own .pure-g division. I elaborated more on this in the Github discussion.