diff --git a/agnosticui-react/src/__snapshots__/storybook.test.js.snap b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
index 0b614034e..f55b5d0cb 100644
--- a/agnosticui-react/src/__snapshots__/storybook.test.js.snap
+++ b/agnosticui-react/src/__snapshots__/storybook.test.js.snap
@@ -696,21 +696,29 @@ exports[`Storyshots Grid Usage Examples 1`] = `
 Array [
   <section>
     <h1>
-      Basic Grid
+      FlexGrid
     </h1>
     <p>
       <i>
         xs
       </i>
-       = Extra Small. 
+       = Extra Small.
       <i>
         sm
       </i>
-       = Small. 
+       = Small.
+      <i>
+        md
+      </i>
+       = Medium.
       <i>
         lg
       </i>
        = Large.
+      <i>
+        xl
+      </i>
+       = Extra Large.
     </p>
     <p>
       The following breakpoints can be overriden by redefining in your stylesheet and omitting the 
diff --git a/agnosticui-react/src/stories/FlexGrid.stories.js b/agnosticui-react/src/stories/FlexGrid.stories.js
index 876069bcb..4fb49ccb7 100644
--- a/agnosticui-react/src/stories/FlexGrid.stories.js
+++ b/agnosticui-react/src/stories/FlexGrid.stories.js
@@ -14,8 +14,14 @@ export default {
 export const UsageExamples = () => (
   <>
     <section>
-      <h1>Basic Grid</h1>
-      <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
+      <h1>FlexGrid</h1>
+      <p>
+        <i>xs</i> = Extra Small.
+        <i>sm</i> = Small.
+        <i>md</i> = Medium.
+        <i>lg</i> = Large.
+        <i>xl</i> = Extra Large.
+      </p>
       <p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i> part:</p>
       <pre>
         --agnosticui-default-sm-min: 576px;
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexCol.js b/agnosticui-vue/src/stories/FlexGrid/FlexCol.js
deleted file mode 100644
index e046df0f0..000000000
--- a/agnosticui-vue/src/stories/FlexGrid/FlexCol.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import createProps from './createProps'
-import getClass from './classNames'
-import { ColumnSizeType, ViewportSizeType } from './types'
-
-const propTypes = {
-  /** xs - number of units when viewport is "extra small" */
-  xs: ColumnSizeType,
-  /** sm - number of units when viewport is "small" */
-  sm: ColumnSizeType,
-  /** md - number of units when viewport is "medium" */
-  md: ColumnSizeType,
-  /** lg - number of units when viewport is "large" */
-  lg: ColumnSizeType,
-  /** xl - number of units when viewport is "extra large" */
-  xl: ColumnSizeType,
-  /** xsOffset - number of units to offset when viewport is "extra small" */
-  xsOffset: PropTypes.number,
-  /** smOffset - number of units to offset when viewport is "small" */
-  smOffset: PropTypes.number,
-  /** mdOffset - number of units to offset when viewport is "medium" */
-  mdOffset: PropTypes.number,
-  /** lgOffset - number of units to offset when viewport is "large" */
-  lgOffset: PropTypes.number,
-  /** xlOffset - number of units to offset when viewport is "extra large" */
-  xlOffset: PropTypes.number,
-  /** first - Forces a column to appear first */
-  first: ViewportSizeType,
-  /** last - Forces a column to appear last */
-  last: ViewportSizeType,
-  /** className - additional custom class to use */
-  className: PropTypes.string,
-  /** tagName - tag to use defaults to div */
-  tagName: PropTypes.string,
-  /** children - react children */
-  children: PropTypes.node,
-}
-
-const classMap = {
-  xs: 'col-xs',
-  sm: 'col-sm',
-  md: 'col-md',
-  lg: 'col-lg',
-  xl: 'col-xl',
-  xsOffset: 'col-xs-offset',
-  smOffset: 'col-sm-offset',
-  mdOffset: 'col-md-offset',
-  lgOffset: 'col-lg-offset',
-  xlOffset: 'col-xl-offset',
-}
-
-function isInteger(value) {
-  return (
-    typeof value === 'number' && isFinite(value) && Math.floor(value) === value
-  )
-}
-
-function getColClassNames(props) {
-  const extraClasses = []
-
-  if (props.className) {
-    extraClasses.push(props.className)
-  }
-
-  if (props.first) {
-    extraClasses.push(getClass('first-' + props.first))
-  }
-
-  if (props.last) {
-    extraClasses.push(getClass('last-' + props.last))
-  }
-
-  return Object.keys(props)
-    .filter((key) => classMap[key])
-    .map((key) =>
-      getClass(
-        isInteger(props[key]) ? classMap[key] + '-' + props[key] : classMap[key]
-      )
-    )
-    .concat(extraClasses)
-}
-
-export function getColumnProps(props) {
-  return createProps(propTypes, props, getColClassNames(props))
-}
-
-const FlexCol = (props) => {
-  const { tagName, ...columnProps } = props
-  return React.createElement(tagName || 'div', getColumnProps(columnProps))
-}
-
-FlexCol.propTypes = propTypes
-
-export default FlexCol;
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexCol.vue b/agnosticui-vue/src/stories/FlexGrid/FlexCol.vue
new file mode 100644
index 000000000..e947b038a
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexCol.vue
@@ -0,0 +1,102 @@
+<template>
+  <component :is="tagName" :class="classNames">
+    <slot />
+  </component>
+</template>
+
+<script>
+import getClass from "./classNames";
+import { ColumnSizeType, ViewportSizeTypeProp } from "./types";
+
+const isInteger = (value) => {
+  return (
+    typeof value === "number" && isFinite(value) && Math.floor(value) === value
+  );
+};
+
+const classMap = {
+  xs: "col-xs",
+  sm: "col-sm",
+  md: "col-md",
+  lg: "col-lg",
+  xl: "col-xl",
+  xsOffset: "col-xs-offset",
+  smOffset: "col-sm-offset",
+  mdOffset: "col-md-offset",
+  lgOffset: "col-lg-offset",
+  xlOffset: "col-xl-offset",
+};
+
+export default {
+  name: "agnostic-flexcol",
+  props: {
+    /** xs - number of units when viewport is "extra small" */
+    xs: { type: ColumnSizeType },
+    /** sm - number of units when viewport is "small" */
+    sm: { type: ColumnSizeType },
+    /** md - number of units when viewport is "medium" */
+    md: { type: ColumnSizeType },
+    /** lg - number of units when viewport is "large" */
+    lg: { type: ColumnSizeType },
+    /** xl - number of units when viewport is "extra large" */
+    xl: { type: ColumnSizeType },
+    /** xsOffset - number of units to offset when viewport is "extra small" */
+    xsOffset: { type: Number },
+    /** smOffset - number of units to offset when viewport is "small" */
+    smOffset: { type: Number },
+    /** mdOffset - number of units to offset when viewport is "medium" */
+    mdOffset: { type: Number },
+    /** lgOffset - number of units to offset when viewport is "large" */
+    lgOffset: { type: Number },
+    /** xlOffset - number of units to offset when viewport is "extra large" */
+    xlOffset: { type: Number },
+    /** first - Forces a column to appear first */
+    first: ViewportSizeTypeProp,
+    /** last - Forces a column to appear last */
+    last: ViewportSizeTypeProp,
+    /** className - additional custom class to use */
+    customClasses: { type: String, default: "" },
+    /** tagName - tag to use defaults to div */
+    tagName: { type: String, default: "div" },
+  },
+  computed: {
+    classNames() {
+      const props = this.$props;
+      const extraClasses = [];
+
+      if (this.customClasses) {
+        extraClasses.push(this.customClasses);
+      }
+
+      if (this.first) {
+        extraClasses.push(getClass("first-" + this.first));
+      }
+
+      if (this.last) {
+        extraClasses.push(getClass("last-" + this.last));
+      }
+
+      // Loop ALL props (so we reject if prop wasn't passed in)
+      const extraKlasses = Object.keys(props)
+        .filter((key) => classMap[key])
+        .map((key) => {
+          const propValue = props[key];
+          // Reject since prop wasn't passed in w/a truthy value
+          if (!propValue) {
+            return false;
+          }
+          return getClass(
+            isInteger(propValue)
+              ? classMap[key] + "-" + propValue
+              : classMap[key]
+          );
+        })
+        // filter back out falsy (rejected propValue's from above)
+        .filter((key) => key)
+        .concat(extraClasses);
+
+      return extraKlasses;
+    },
+  },
+};
+</script>
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js b/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js
deleted file mode 100644
index 821614259..000000000
--- a/agnosticui-vue/src/stories/FlexGrid/FlexGrid.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import FlexGrid from './FlexGrid';
-import FlexRow from './FlexRow';
-// import FlexCol from './FlexCol';
-// import styles from './FlexGridExample.module.css'
-import renderer from 'react-test-renderer'
-
-// const Field = () => <p className={styles.Field}>Field</p>
-
-describe('FlexGrid', () => {
-  describe('API', () => {
-    test('exports properly', () => {
-      expect(FlexGrid).toBeDefined()
-      expect(FlexRow).toBeDefined()
-      // expect(FlexCol).toBeDefined()
-    })
-  })
-
-  xdescribe('rendering component', () => {
-    test('default', () => {
-      const tree = renderer
-        .create(
-          <FlexGrid>
-            <FlexRow>
-              <FlexCol xs={12} sm={4} lg={6}>
-                <span>yo</span>
-              </FlexCol>
-              <FlexCol xs={12} sm={4} lg={6}>
-                <span>yo</span>
-              </FlexCol>
-            </FlexRow>
-          </FlexGrid>
-        )
-        .toJSON()
-      expect(tree).toMatchSnapshot()
-    })
-  })
-})
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexGridExample.module.css b/agnosticui-vue/src/stories/FlexGrid/FlexGridExample.module.css
new file mode 100644
index 000000000..5b4406299
--- /dev/null
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexGridExample.module.css
@@ -0,0 +1,10 @@
+.DemoCol {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  padding: 2rem 0;
+}
+
+.Field {
+  border: 1px solid #cccccc;
+  padding: 1.5rem 3rem;
+}
diff --git a/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue b/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
index 47c28cedd..d069c3e0c 100644
--- a/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
+++ b/agnosticui-vue/src/stories/FlexGrid/FlexRow.vue
@@ -25,9 +25,7 @@ export default {
 
       for (let i = 0; i < rowKeys.length; ++i) {
         const key = rowKeys[i];
-        console.log("key: ", key);
         const value = this[key];
-        console.log("value: ", value);
         if (value) {
           modifiers.push(getClass(`${key}-${value}`));
         }
diff --git a/agnosticui-vue/src/stories/FlexGrid/createProps.js b/agnosticui-vue/src/stories/FlexGrid/createProps.js
deleted file mode 100644
index c6615ef25..000000000
--- a/agnosticui-vue/src/stories/FlexGrid/createProps.js
+++ /dev/null
@@ -1,10 +0,0 @@
-export default function createProps(propTypes, props, classNames) {
-  const newProps = {}
-
-  Object.keys(props)
-    .filter((key) => key === 'children' || !propTypes[key])
-    .forEach((key) => (newProps[key] = props[key]))
-
-  const className = classNames.filter((cn) => cn).join(' ')
-  return Object.assign({}, newProps, { className })
-}
diff --git a/agnosticui-vue/src/stories/FlexGrid/createProps.test.js b/agnosticui-vue/src/stories/FlexGrid/createProps.test.js
deleted file mode 100644
index 99b474b36..000000000
--- a/agnosticui-vue/src/stories/FlexGrid/createProps.test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import createProps from './createProps';
-
-const propTypes = {
-  b: PropTypes.bool,
-  s: PropTypes.string,
-  children: PropTypes.node,
-}
-test('removes prop types besides children', async () => {
-  const classNames = ['class_a', 'class_b']
-  const props = {
-    s: 'string', // expected: gets removed
-    b: true, // expected: gets removed
-    style: 'color: hotpink;', // expected: preserved
-    children: 'le children',
-  }
-
-  const result = createProps(propTypes, props, classNames)
-  expect(result.children).toEqual('le children')
-  expect(result.className).toEqual('class_a class_b')
-  // keys that are not in propTypes are preserved
-  expect(result.style).toBeDefined();
-
-  // only the children component prop (and props not in propTypes) are preserved
-  expect(result.b).toBeUndefined()
-  expect(result.s).toBeUndefined()
-})
\ No newline at end of file
diff --git a/agnosticui-vue/src/stories/FlexGrid/types.js b/agnosticui-vue/src/stories/FlexGrid/types.js
index 211563d4a..ba75a9a2f 100644
--- a/agnosticui-vue/src/stories/FlexGrid/types.js
+++ b/agnosticui-vue/src/stories/FlexGrid/types.js
@@ -1,9 +1,3 @@
-import PropTypes from 'prop-types'
-
-// export const ColumnSizeType = PropTypes.oneOfType([
-//   PropTypes.number,
-//   PropTypes.bool,
-// ])
 export const ColumnSizeType = [Number, Boolean];
 
 export const ViewportSizeType = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -12,5 +6,3 @@ export const ViewportSizeTypeProp = {
   type: String,
   validator: (v) => ViewportSizeType.includes(v),
 }
-
-// export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])
diff --git a/agnosticui-vue/src/stories/FlexGridTests.vue b/agnosticui-vue/src/stories/FlexGridTests.vue
index 969b39dfe..19414a957 100644
--- a/agnosticui-vue/src/stories/FlexGridTests.vue
+++ b/agnosticui-vue/src/stories/FlexGridTests.vue
@@ -1,30 +1,93 @@
 <template>
-  <FlexGrid tagName="section" customClasses="custom-grid-klass">
-    <!-- Purposely adding all row keys just check they get inserted on row element :) -->
-    <FlexRow
-      start="sm"
-      center="md"
-      end="lg"
-      top="xl"
-      middle="xs"
-      bottom="xs"
-      around="sm"
-      between="lg"
-      customClasses="custom-row-klass"
-    >
-      <span>FlexCol to come soon...</span>
-    </FlexRow>
-  </FlexGrid>
+  <div>
+    <section>
+      <h1>FlexGrid</h1>
+      <p>
+        <i>xs</i> = Extra Small.
+        <i>sm</i> = Small.
+        <i>md</i> = Medium.
+        <i>lg</i> = Large.
+        <i>xl</i> = Extra Large.
+      </p>
+      <p>
+        The following breakpoints can be overriden by redefining in your stylesheet and omitting the
+        <i>-default</i> part:
+      </p>
+      <pre>
+          --agnosticui-default-sm-min: 576px;
+          --agnosticui-default-md-min: 768px;
+          --agnosticui-default-lg-min: 992px;
+          --agnosticui-default-xl-min: 1200px;
+        </pre>
+      <FlexGrid tagName="section" customClasses="custom-grid-klass">
+        <FlexRow :class="styles.DemoCol">
+          <FlexCol v-bind:xs="12" v-bind:sm="4" v-bind:lg="6" v-bind:xl="4">
+            <div :class="styles.Field">xs=12 sm=4 lg=6 xl=4</div>
+          </FlexCol>
+          <FlexCol v-bind:xs="12" v-bind:sm="4" v-bind:lg="6" v-bind:xl="8">
+            <div :class="styles.Field">xs=12 sm=4 lg=6 xl=8</div>
+          </FlexCol>
+        </FlexRow>
+      </FlexGrid>
+    </section>
+    <section>
+      <h1>Offsets</h1>
+      <FlexGrid>
+        <FlexRow :class="styles.DemoCol">
+          <FlexCol v-bind:sm="2" v-bind:style="{ border: '1px solid #f7cac9' }">
+            <p>sm={2}</p>
+          </FlexCol>
+          <FlexCol v-bind:sm="2" v-bind:smOffset="1" v-bind:style="{ border: '1px solid #39cccc' }">
+            <p>sm={2} smOffset={1}</p>
+          </FlexCol>
+          <FlexCol v-bind:sm="2" v-bind:smOffset="1" v-bind:style="{ border: '1px solid #7fdbff' }">
+            <p>sm={2} smOffset={1}</p>
+          </FlexCol>
+          <FlexCol v-bind:sm="2" v-bind:smOffset="2" v-bind:style="{ border: '1px solid #ff6f61' }">
+            <p>sm={2} smOffset={2}</p>
+          </FlexCol>
+        </FlexRow>
+      </FlexGrid>
+    </section>
+    <section>
+      <h1>Row attributes test. Maybe ignore this ;)</h1>
+      <FlexGrid tagName="section" customClasses="custom-grid-klass">
+        <!-- Purposely adding all row keys just check they get inserted on row element :) -->
+        <FlexRow
+          start="sm"
+          center="md"
+          end="lg"
+          top="xl"
+          middle="xs"
+          bottom="xs"
+          around="sm"
+          between="lg"
+          :class="styles.DemoCol"
+        >
+          <FlexCol v-bind:xs="12" v-bind:sm="6">
+            <div :class="styles.Field">Test -- inspect to see if the row got ALL classes applied</div>
+          </FlexCol>
+          <FlexCol v-bind:xs="12" v-bind:sm="6">
+            <div :class="styles.Field">Yo</div>
+          </FlexCol>
+        </FlexRow>
+      </FlexGrid>
+    </section>
+  </div>
 </template>
 
 <script>
-/*
-
-    */
 import FlexGrid from "./FlexGrid/FlexGrid.vue";
 import FlexRow from "./FlexGrid/FlexRow.vue";
+import FlexCol from "./FlexGrid/FlexCol.vue";
+import styles from "./FlexGrid/FlexGridExample.module.css";
 export default {
   name: "flex-grid-tests",
-  components: { FlexGrid, FlexRow },
+  components: { FlexGrid, FlexCol, FlexRow },
+  computed: {
+    styles() {
+      return styles;
+    },
+  },
 };
 </script>
\ No newline at end of file