Add .grid__auto (#874)

Author: aaronshekey

docs/_data/grid.json

@@ -78,6 +78,12 @@
       "output": "grid-template-columns: repeat(1, minmax(0, 12fr))",
       "define": "Creates a grid layout with 12 columns",
       "responsive": true
+    },
+    {
+      "class": "grid__auto",
+      "output": "grid-template-columns: auto 1fr",
+      "define": "Creates a grid layout with auto-sized columns based on their content",
+      "responsive": true
     }
   ],
   "columns": [

docs/product/base/grid.html

@@ -317,6 +317,7 @@
 <div class="d-grid grid__10">…</div>
 <div class="d-grid grid__11">…</div>
 <div class="d-grid grid__12">…</div>
+<div class="d-grid grid__auto">…</div>
 {% endhighlight %}
         <div class="stacks-preview--example ff-mono">
             <div class="mb16 d-grid g16 grid__1">
@@ -418,7 +419,7 @@
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">11</div>
             </div>
 
-            <div class="d-grid g16 grid__12">
+            <div class="mb32 d-grid g16 grid__12">
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">1</div>
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">2</div>
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">3</div>
@@ -432,6 +433,13 @@
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">11</div>
                 <div class="grid--item bg-black-075 p12 ba bc-black-3">12</div>
             </div>
+
+            <div class="d-grid g16 grid__auto">
+                <div class="grid--item bg-black-075 p12 ba bc-black-3">1</div>
+                <div class="grid--item bg-black-075 p12 ba bc-black-3">2</div>
+                <div class="grid--item bg-black-075 p12 ba bc-black-3">3</div>
+                <div class="grid--item bg-black-075 p12 ba bc-black-3">4</div>
+            </div>
         </div>
     </div>
 </section>

lib/css/atomic/_stacks-grid.less

@@ -55,6 +55,7 @@
 #stacks-internals #responsify('.grid__10', { grid-template-columns: repeat(10, minmax(0, 1fr)); });
 #stacks-internals #responsify('.grid__11', { grid-template-columns: repeat(11, minmax(0, 1fr)); });
 #stacks-internals #responsify('.grid__12', { grid-template-columns: repeat(12, minmax(0, 1fr)); });
+#stacks-internals #responsify('.grid__auto', { grid-template-columns: auto 1fr; });
 
 //  ============================================================================
 //  $   COLUMN SPANS