diff --git a/src/helpers/columnWidth/columnWidth.js b/src/helpers/columnWidth/columnWidth.js
index e75324c..9f970a1 100644
--- a/src/helpers/columnWidth/columnWidth.js
+++ b/src/helpers/columnWidth/columnWidth.js
@@ -1,13 +1,18 @@
 import { css } from 'styled-components';
 import has from 'lodash/has';
+import isUndefined from 'lodash/isUndefined';
 import isString from 'lodash/isString';
 
 import { themeProvider } from '../../theme';
 
 const { theme } = themeProvider;
 
-export const percentage = (props, breakpoint) =>
-  (Math.abs(props[breakpoint]) / theme(props).columns) * 100;
+export const percentage = (props, breakpoint) => {
+  const value = has(props, `${breakpoint}`)
+    ? props[breakpoint]
+    : theme(props).col[breakpoint];
+  return (Math.abs(value) / theme(props).columns) * 100;
+};
 
 export const display = (props, breakpoint) => {
   if ((props.display && isString(props.display))) {
@@ -36,12 +41,15 @@ const columnWidth = (props, breakpoint) => {
     `;
   }
 
-  const width = percentage(props, breakpoint);
+  if (!has(props, `${breakpoint}`) && isUndefined(theme(props).col[breakpoint])) {
+    return null;
+  }
 
-  return has(props, `${breakpoint}`) ? css`
+  const width = percentage(props, breakpoint);
+  return css`
     flex-basis: ${width}%;
     max-width: ${width}%;
     ${display(props, breakpoint)}
-  ` : null;
+  `;
 };
 export default columnWidth;
diff --git a/src/helpers/columnWidth/columnWidth.spec.js b/src/helpers/columnWidth/columnWidth.spec.js
index aa90849..c906fb5 100644
--- a/src/helpers/columnWidth/columnWidth.spec.js
+++ b/src/helpers/columnWidth/columnWidth.spec.js
@@ -1,6 +1,9 @@
 import columnWidth, { percentage, isHidden, isAuto, display } from './columnWidth';
 
 const mockProps = { xs: -1, sm: 2, md: 0, lg: 6 };
+const mockTheme = customTheme => ({
+  flexa: { ...customTheme },
+});
 
 describe('percentage', () => {
   test('should generate a percentage based on collumn size', () => {
@@ -9,6 +12,23 @@ describe('percentage', () => {
     expect(percentage(mockProps, 'sm')).toEqual(16.666666666666664);
   });
 
+  test('should generate a percentage based on "col" theme value if set and col breakpoint does not exist', () => {
+    const breakpoints = { sm: 2, md: 0, lg: 6 };
+    const props = {
+      ...breakpoints,
+      theme: mockTheme({ col: { xs: 12 } }),
+    };
+    expect(percentage(props, 'xs')).toEqual(100);
+  });
+
+  test('should generate a percentage based on breakpoint value even if theme "col" value is set', () => {
+    const props = {
+      ...mockProps,
+      theme: mockTheme({ col: { md: 12 } }),
+    };
+    expect(percentage(props, 'md')).toEqual(0);
+  });
+
   test('should normalise negative numbers', () => {
     expect(percentage(mockProps, 'xs')).toEqual(8.333333333333332);
   });
@@ -66,6 +86,16 @@ describe('columnWidth', () => {
     expect(width).toEqual(null);
   });
 
+  test('should generate width if "col" value is set in theme', () => {
+    const props = {
+      ...mockProps,
+      theme: mockTheme({ col: { xl: 12 } }),
+    };
+    const width = columnWidth(props, 'xl').join('');
+    expect(width).toContain('flex-basis: 100%;');
+    expect(width).toContain('max-width: 100%;');
+  });
+
   test('should not return display:block', () => {
     const displayProps = { xs: 1, display: 'flex' };
     const width = columnWidth(displayProps, 'xs');
diff --git a/src/theme/defaultTheme.js b/src/theme/defaultTheme.js
index d817308..1bd82cc 100644
--- a/src/theme/defaultTheme.js
+++ b/src/theme/defaultTheme.js
@@ -12,6 +12,12 @@ const defaultTheme = {
     md: 48,
     lg: 60,
   },
+  col: {
+    xs: undefined,
+    sm: undefined,
+    md: undefined,
+    lg: undefined,
+  },
 };
 
 export default defaultTheme;
diff --git a/src/theme/theme.js b/src/theme/theme.js
index 30dd125..2b706ce 100644
--- a/src/theme/theme.js
+++ b/src/theme/theme.js
@@ -19,6 +19,10 @@ export const theme = (props) => {
       ...defaultTheme.breakpoints,
       ...customTheme.breakpoints,
     },
+    col: {
+      ...defaultTheme.col,
+      ...customTheme.col,
+    },
   });
 };
 
diff --git a/src/theme/theme.spec.js b/src/theme/theme.spec.js
index cb3b3be..57ccdf6 100644
--- a/src/theme/theme.spec.js
+++ b/src/theme/theme.spec.js
@@ -34,6 +34,7 @@ describe('overriding the default theme', () => {
       breakpoints: { lg: 60, md: 48, sm: 30, xs: 0 },
       columns: 16,
       gutter: { lg: 1, md: 1, sm: 0.5, xs: 0.5 },
+      col: { lg: undefined, md: undefined, sm: undefined, xs: undefined },
     };
 
     expect(theme(customTheme)).toEqual(endTheme);
@@ -47,6 +48,7 @@ describe('overriding the default theme', () => {
           breakpoints: { lg: 65, md: 55, sm: 45, xs: 35 },
           columns: 10,
           gutter: { lg: 4, md: 3, sm: 2, xs: 1 },
+          col: { lg: undefined, md: undefined, sm: undefined, xs: 12 },
         },
       },
     };