Add Grid nesting example #353

picturepan2 · Dec 7, 2017 · 57e1425 · 57e1425
1 parent 948298b
commit 57e1425
Showing 1 changed file with 36 additions and 1 deletion.
diff --git a/docs/layout.html b/docs/layout.html
@@ -402,7 +402,7 @@ <h3 class="s-title"><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexb
 &lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
-      <h4 id="grid-offset" class="s-subtitle">Grid offset</h4>
+        <h4 id="grid-offset" class="s-subtitle">Grid offset</h4>
         <div class="docs-note">
           <p>The Flexbox grid provides margin auto utilities to set offset. There are <code>col-mx-auto</code>, <code>col-ml-auto</code> and <code>col-mr-auto</code> to set margins between columns without using empty columns.</p>
         </div>
@@ -460,6 +460,41 @@ <h4 id="grid-offset" class="s-subtitle">Grid offset</h4>
     &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-2&quot;</span>&gt;col-2&lt;<span class="tag">/div</span>&gt;
   &lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+        <h4 id="grid-nesting" class="s-subtitle">Grid nesting</h4>
+        <div class="docs-note">
+          <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
+        </div>
+        <div class="columns">
+          <div class="column col-6">
+            <div class="bg-gray docs-block">col-6</div>
+            <div class="columns">
+              <div class="column col-6">
+                <div class="bg-primary docs-block">col-6</div>
+              </div>
+              <div class="column col-6">
+                <div class="bg-primary docs-block">col-6</div>
+              </div>
+            </div>
+          </div>
+          <div class="column col-6">
+            <div class="bg-gray docs-block">col-6</div>
+          </div>
+        </div>
+
+<!-- layout -->
+<pre class="code" data-lang="HTML"><code>&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;container&quot;</span>&gt;
+  &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6
+      &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;columns&quot;</span>&gt;
+        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+        &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+      &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">/div</span>&gt;
+    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;column col-6&quot;</span>&gt;col-6&lt;<span class="tag">/div</span>&gt;
+  &lt;<span class="tag">/div</span>&gt;
+&lt;<span class="tag">/div</span>&gt;
 </code></pre>
 
       </div>