diff --git a/packages/system/src/styles/flexbox-grids.test.ts b/packages/system/src/styles/flexbox-grids.test.ts
index 190e091a..eb941d88 100644
--- a/packages/system/src/styles/flexbox-grids.test.ts
+++ b/packages/system/src/styles/flexbox-grids.test.ts
@@ -48,6 +48,8 @@ describe('#flexboxGrids', () => {
       flex: '0 0 33.3333%',
     })
 
+		expect(flexboxGrids({ col: false })).toEqual({})
+
     expect(flexboxGrids({ col: true })).toEqual({
       boxSizing: 'border-box',
       flexBasis: 0,
diff --git a/packages/system/src/styles/flexbox-grids.ts b/packages/system/src/styles/flexbox-grids.ts
index 8c342390..3be6a125 100644
--- a/packages/system/src/styles/flexbox-grids.ts
+++ b/packages/system/src/styles/flexbox-grids.ts
@@ -47,7 +47,7 @@ const getColStyle = (
 }
 
 export interface ColProps<T extends ITheme = Theme> {
-  col?: SystemProp<true | 'auto' | string | number, T>
+  col?: SystemProp<true | 'auto', T>
 }
 export const col = createStyleGenerator<ColProps>({
   getStyle: (props) => {
@@ -59,6 +59,10 @@ export const col = createStyleGenerator<ColProps>({
       maxWidth: '100%',
     }
 
+		if (value === false) {
+			return null
+		}
+
     if (obj(value)) {
       const breakpointsStyle = reduceVariants(
         props,