diff options
1 files changed, 36 insertions, 1 deletions
| -rw-r--r-- | docs/layout.html | 37 |
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 @@ <<span class="tag">/div</span>> </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 @@ <<span class="tag">/div</span>> </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><<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"container"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6 + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"columns"</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">/div</span>> + <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"column col-6"</span>>col-6<<span class="tag">/div</span>> + <<span class="tag">/div</span>> +<<span class="tag">/div</span>> +</code></pre> + </div> <div class="container"> |