Add Grid nesting example #353

1 files changed, 36 insertions, 1 deletions

diff --git a/docs/layout.html b/docs/layout.html
index 777fcef..05785db 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -402,7 +402,7 @@
 &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>
@@ -462,6 +462,41 @@
 &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>
 
       <div class="container">