feat(column): replace the auto prop in favour of grow and shrink

src/column.jsx

@@ -12,6 +12,8 @@ import {
   hidden,
   push,
   pull,
+  grow,
+  shrink,
   gutter as gutterMixin,
   noGutter,
   position,
@@ -45,6 +47,8 @@ const Column = (props) => {
     hidden,
     position,
     noGutter,
+    grow,
+    shrink,
     gutter: args => gutterMixin(getGutterWidth(args)),
     span: args => span(getColumnWidth(args, fixed)),
     push: args => push(getColumnWidth(args)),
@@ -55,6 +59,8 @@ const Column = (props) => {
   return (
     <ColumnResponsiveProps
       order={props.order}
+      grow={props.grow}
+      shrink={props.shrink}
       verticalAlign={props.verticalAlign}
       span={props.span}
       push={props.push}
@@ -76,8 +82,8 @@ const columnPropTypes = {
   children: node,
   debug: bool,
   fixed: bool,
-  // auto: bool,
-  // static: bool,
+  grow: oneOfType([objectOf(number), number]),
+  shrink: oneOfType([objectOf(number), number]),
   order: oneOfType([objectOf(number), number]),
   hidden: oneOfType([objectOf(bool), bool]),
   noGutter: oneOfType([objectOf(bool), bool]),

src/utils/mixins.js

@@ -22,9 +22,16 @@ export const span = size => `
   max-width: ${size};
 `;
 
-export const auto = () => `
-  flex-grow: 0;
-  flex-basis: 0;
+export const grow = size => `
+  width: auto;
+  max-width: none !important;
+  flex-grow: ${size};
+`;
+
+export const shrink = size => `
+  width: auto;
+  max-width: none !important;
+  flex-shrink: ${size};
 `;
 
 export const push = pushVal => (`
@@ -50,8 +57,6 @@ export const noGutter = (val = false) => (
     null
 );
 
-export const debug = () => '';
-
 export const hidden = val => (
   val ? 'display: none;' : 'display: block;'
 );
@@ -102,6 +107,10 @@ export const alignColumns = val => (`
   align-items: ${alignValues[val] || 'normal'};
   `);
 
+export const debug = () => `
+  background: line-gradient(from left, red 0, red 100%);
+`;
+
 // export const verticalAlignColumns = (val) => {
 //   const alignment = getVerticalAlignment(val);
 //