4

The docs don't contain any example of nested grid. Could someone post an example of nested grid

aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242

1 Answers1

5

Trick is to use nested pure-g inside pure-u-* class

<link href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css" rel="stylesheet"/>
<div class="pure-g">
        <div class="pure-u-16-24">
            <span>Msg goes here</span>
        </div>
        <div class="pure-u-8-24">
            <div class="pure-g">
                <div class="pure-u-1-2">
                    <button>Text</button>
                </div>
                <div class="pure-u-1-2 l-box">
                    <select>
                       <option value="">Select </option>
                    </select>
                </div>
            </div>
        </div>
    </div>
aWebDeveloper
  • 36,687
  • 39
  • 170
  • 242
  • "All child elements of a grid must be units Child elements contained within an element with a pure-g classname must be a grid unit with a pure-u or pure-u-* classname." - https://purecss.io/grids/ Nesting does not require pure-g and using pure-g inside pure-g can introduce weird responsive problems. You can just use pure-u-1. – Katu Sep 24 '18 at 03:24