carolineartz
3/3/2014 - 1:06 AM

example of nesting in purecss.io grids

example of nesting in purecss.io grids

purecss-grid-nested.html
content_copyfile_download
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nesting of Grids example with Pure css</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
</head>

<body>
    <div class="pure-g-r">
        <div class="pure-u-2-3">
            <div class="pure-g-r">
                <div class="pure-u-1-3">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
                </div>
                <div class="pure-u-1-3">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
                </div>
                <div class="pure-u-1-3">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
                </div>
            </div>
        </div>
        <div class="pure-u-1-3 ad">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa.</p>
        </div>
    </div>
</body>

</html>