From 14552514e53b3ef5b5037caaa9bec43936c3c1cf Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 16 Dec 2018 18:43:09 +0800
Subject: Add Auto width column #541

---
 docs/layout/grid.html | 121 ++++++++++++++++++++++++++++++++------------------
 1 file changed, 78 insertions(+), 43 deletions(-)

(limited to 'docs/layout/grid.html')

diff --git a/docs/layout/grid.html b/docs/layout/grid.html
index 83a8c9e..040b54a 100644
--- a/docs/layout/grid.html
+++ b/docs/layout/grid.html
@@ -217,37 +217,37 @@
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primary docs-block"></div>
               </div>
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primar docs-block"></div>
               </div>
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primar docs-block"></div>
               </div>
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primar docs-block"></div>
               </div>
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primar docs-block"></div>
               </div>
               <div class="column">
                 <div class="bg-primary text-secondary docs-block"></div>
               </div>
               <div class="column">
-                <div class="bg-primary text-secondary docs-block"></div>
+                <div class="bg-secondary text-primar docs-block"></div>
               </div>
             </div>
             <div class="columns">
@@ -291,7 +291,7 @@
                 <div class="bg-gray docs-block">col-6 (gapless)</div>
               </div>
               <div class="column col-6">
-                <div class="bg-gray docs-block">col-6 (gapless)</div>
+                <div class="bg-secondary text-primary docs-block">col-6 (gapless)</div>
               </div>
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- gapless columns --&gt;</span>
@@ -315,54 +315,85 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-8"</span>&gt;</span>col-8<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <h4 class="s-subtitle" id="grid-offset">Grid offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4>
+            <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4>
+            <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
+            <div class="docs-demo 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-secondary text-primary docs-block">col-6</div>
+                  </div>
+                  <div class="column col-6">
+                    <div class="bg-secondary text-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>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid nesting example --&gt;</span>
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6
+      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+</code></pre>
+            <h4 class="s-subtitle" id="grid-offset">Column offset<a class="anchor" href="#grid-offset" aria-hidden="true">#</a></h4>
             <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 class="columns">
+            <div class="columns text-center">
               <div class="column col-2">
                 <div class="bg-gray docs-block">col-2</div>
               </div>
               <div class="column col-4 col-mx-auto">
-                <div class="bg-gray docs-block">col-4 col-mx-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns text-center">
               <div class="column col-2">
                 <div class="bg-gray docs-block">col-2</div>
               </div>
               <div class="column col-4 col-ml-auto">
-                <div class="bg-gray docs-block">col-4 col-ml-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns text-center">
               <div class="column col-4 col-ml-auto">
-                <div class="bg-gray docs-block">col-4 col-ml-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-ml-auto</div>
               </div>
               <div class="column col-2">
                 <div class="bg-gray docs-block">col-2</div>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns text-center">
               <div class="column col-4 col-mx-auto">
-                <div class="bg-gray docs-block">col-4 col-mx-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
               </div>
               <div class="column col-2">
                 <div class="bg-gray docs-block">col-2</div>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns text-center">
               <div class="column col-4 col-mr-auto">
-                <div class="bg-gray docs-block">col-4 col-mr-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-mr-auto</div>
               </div>
               <div class="column col-2">
                 <div class="bg-gray docs-block">col-2</div>
               </div>
             </div>
-            <div class="columns">
+            <div class="columns text-center">
               <div class="column col-4 col-mx-auto">
-                <div class="bg-gray docs-block">col-4 col-mx-auto</div>
+                <div class="bg-secondary text-primary docs-block">col-4 col-mx-auto</div>
               </div>
             </div>
             <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid offset example --&gt;</span>
@@ -373,34 +404,38 @@
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-            <h4 class="s-subtitle" id="grid-nesting">Grid nesting<a class="anchor" href="#grid-nesting" aria-hidden="true">#</a></h4>
-            <p>To nest grids, add the new <code>columns</code> and <code>column</code> structure within an existing column.</p>
-            <div class="docs-demo 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>
+            <h4 class="s-subtitle" id="column-auto">Auto width column<a class="anchor" href="#column-auto" aria-hidden="true">#</a></h4>
+            <p>You can add the <code>col-auto</code> class to the <code>column</code> to have auto width columns.
+              There are <code>col-xl-auto</code>, <code>col-lg-auto</code>, <code>col-md-auto</code>, <code>col-sm-auto</code> and <code>col-xs-auto</code> to set auto width in different viewport sizes.
+            </p>
+            <div class="columns">
+              <div class="column col-auto">
+                <div class="bg-secondary text-primary docs-block">col-auto</div>
               </div>
-              <div class="column col-6">
-                <div class="bg-gray docs-block">col-6</div>
+              <div class="column">
+                <div class="bg-gray docs-block">col</div>
               </div>
             </div>
-            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- grid nesting example --&gt;</span>
+            <div class="columns">
+              <div class="column col-lg-auto col-6">
+                <div class="bg-secondary text-primary docs-block">col-lg-auto</div>
+              </div>
+              <div class="column">
+                <div class="bg-gray docs-block">col</div>
+              </div>
+            </div>
+            <pre class="code" data-lang="HTML"><code><span class="hljs-comment">&lt;!-- auto width column example --&gt;</span>
 <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
   <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6
-      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
-    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-6"</span>&gt;</span>col-6<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-auto"</span>&gt;</span>col-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+  <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+
+<span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
+  <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"columns"</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column col-lg-auto col-6"</span>&gt;</span>col-lg-auto<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
+    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"column"</span>&gt;</span>col<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
 </code></pre>
-- 
cgit v1.3.1-23-gd82d