diff --git a/example/src/App.js b/example/src/App.js
index 1472cc8..f57d76b 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -115,7 +115,7 @@ export default class App extends Component {
               </Col>
             </Row>
           </Main>
-          <Grid style={{ backgroundColor: 'pink' }}>
+          <Grid style={{ backgroundColor: 'lightcyan' }} spacing={0.5}>
             <Row>
               <Col flex={5}>
                 <Segment>1</Segment>
diff --git a/src/components/tests/Col.test.js b/src/components/tests/Col.test.js
index bf09e08..fdf7687 100644
--- a/src/components/tests/Col.test.js
+++ b/src/components/tests/Col.test.js
@@ -26,7 +26,7 @@ describe('<Col />', () => {
     });
   });
 
-  describe('with added props - 1st set', () => {
+  describe('with added props', () => {
     const wrapperWithProps = shallow(
       <Col flex={[2, 3, '75%']} order={2} alignSelf="center" />
     );
@@ -45,4 +45,22 @@ describe('<Col />', () => {
       return testStyle(wrapperWithProps, style, value);
     });
   });
+
+  describe('with the grid prop', () => {
+    const wrapper = shallow(<Col grid />);
+
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex-flow', value: 'row wrap' },
+      { style: 'justify-content', value: 'center' },
+    ];
+
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
+
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapper, style, value);
+    });
+  });
 });
diff --git a/src/components/tests/Grid.test.js b/src/components/tests/Grid.test.js
index f212914..fab8a0c 100644
--- a/src/components/tests/Grid.test.js
+++ b/src/components/tests/Grid.test.js
@@ -8,6 +8,7 @@ import 'jest-styled-components';
 
 import testStyle from './helpers/testStyle';
 import Grid from '../Grid';
+import Row from '../Row';
 import Col from '../Col';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -44,7 +45,6 @@ describe('<Grid />', () => {
         alignItems="flex-end"
         badProp1="this is a bad prop"
         badProp2="this is another bad prop"
-        spacing
       />
     );
 
@@ -64,85 +64,93 @@ describe('<Grid />', () => {
     });
   });
 
-  describe('passes styles down to children columns', () => {
-    const wrapper = mount(
-      <Grid spacing={2}>
-        <Col>Hello</Col>
-      </Grid>
-    );
-
-    Col.displayName = 'Col';
-
-    it('should match snapshot with props', () => {
-      expect(shallowToJson(wrapper)).toMatchSnapshot();
-    });
-
-    it(`should pass padding when spacing prop is present`, () => {
+  describe('with spacing', () => {
+    it('should have padding-top, padding-bottom by default', () => {
       const tree = renderer
         .create(
-          <Grid spacing={2}>
+          <Grid spacing>
             <Col />
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('padding', 'calc(2em / 2)', {
-        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-top', 'calc(1em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('padding-bottom', 'calc(1em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
       });
     });
 
-    it(`should pass flex when the columns prop is present`, () => {
+    it('should have correct padding-top, padding-bottom when passed with spacing prop', () => {
       const tree = renderer
         .create(
-          <Grid columns={2}>
+          <Grid spacing={2}>
             <Col />
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '50%', {
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-top', 'calc(2em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('padding-bottom', 'calc(2em / 2)', {
+        modifier: css`
+          :not(.brckwrx-row) :not(.brckwrx-col)
+        `,
       });
     });
+  });
 
-    it(`should pass flex and adjust flex-basis based on media queries when passed xs, sm, md, lg, and xl props`, () => {
+  describe('passes styles down to children columns', () => {
+    const wrapper = mount(
+      <Grid spacing={2}>
+        <Col>Hello</Col>
+      </Grid>
+    );
+
+    Col.displayName = 'Col';
+
+    it('should match snapshot with props', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
+
+    it(`should pass padding when spacing prop is present`, () => {
       const tree = renderer
         .create(
-          <Grid xs={4} sm={1} md={2} lg={4} xl={10}>
-            <Col />
+          <Grid spacing={2}>
+            <Row>
+              <Col />
+            </Row>
           </Grid>
         )
         .toJSON();
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '25%', {
-        modifier: css`> .brckwrx-col`,
-      });
-
-      // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '100%', {
-        media: 'screen and (min-width: 576px)',
-        modifier: css`> .brckwrx-col`,
-      });
-
-      // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '50%', {
-        media: 'screen and (min-width: 768px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col`,
       });
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '25%', {
-        media: 'screen and (min-width: 992px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-left', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row`,
       });
 
       // prettier-ignore
-      expect(tree).toHaveStyleRule('flex-basis', '10%', {
-        media: 'screen and (min-width: 1200px)',
-        modifier: css`> .brckwrx-col`,
+      expect(tree).toHaveStyleRule('padding-right', 'calc(2em / 2)', {
+        modifier: css`:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row`,
       });
     });
   });
diff --git a/src/components/tests/Row.test.js b/src/components/tests/Row.test.js
index ddae2d7..d8f8f3f 100644
--- a/src/components/tests/Row.test.js
+++ b/src/components/tests/Row.test.js
@@ -1,10 +1,14 @@
 import React from 'react';
+import { css } from 'styled-components';
 import Enzyme, { shallow } from 'enzyme';
 import { shallowToJson } from 'enzyme-to-json';
 import Adapter from 'enzyme-adapter-react-16';
+import renderer from 'react-test-renderer';
 import 'jest-styled-components';
 
+import testStyle from './helpers/testStyle';
 import Row from '../Row';
+import Col from '../Col';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -15,23 +19,84 @@ describe('<Row />', () => {
     expect(wrapper.find('div').exists()).toBe(true);
   });
 
-  it('should match snapshot', () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
-  });
+  describe('with default props/settings', () => {
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex', value: '0 1 100%' },
+      { style: 'flex-flow', value: 'row wrap' },
+      { style: 'justify-content', value: 'center' },
+      { style: 'order', value: '0' },
+    ];
 
-  it('should have default style - flex: 0 1 100%', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('flex', '0 1 100%');
-  });
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapper)).toMatchSnapshot();
+    });
 
-  it('should have default style - flex-flow: row wrap', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('flex-flow', 'row wrap');
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapper, style, value);
+    });
   });
 
-  it('should have default style - justify-content: center', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('justify-content', 'center');
+  describe('with added props', () => {
+    const wrapperWithProps = shallow(
+      <Row flow="column nowrap" justify="space-between" order={2} />
+    );
+
+    const expectedStyleList = [
+      { style: 'display', value: 'flex' },
+      { style: 'flex', value: '0 1 100%' },
+      { style: 'flex-flow', value: 'column nowrap' },
+      { style: 'justify-content', value: 'space-between' },
+      { style: 'order', value: '2' },
+    ];
+
+    it('should match snapshot', () => {
+      expect(shallowToJson(wrapperWithProps)).toMatchSnapshot();
+    });
+
+    expectedStyleList.forEach(({ style, value }) => {
+      return testStyle(wrapperWithProps, style, value);
+    });
   });
 
-  it('should have default style - order: 0', () => {
-    expect(wrapper.find('div')).toHaveStyleRule('order', '0');
+  describe('with columns/breakpoints', () => {
+    it(`should pass flex and adjust flex-basis based on media queries when passed xs, sm, md, lg, and xl props`, () => {
+      const tree = renderer
+        .create(
+          <Row xs={4} sm={1} md={2} lg={4} xl={10}>
+            <Col />
+          </Row>
+        )
+        .toJSON();
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '25%', {
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '100%', {
+        media: 'screen and (min-width: 576px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '50%', {
+        media: 'screen and (min-width: 768px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '25%', {
+        media: 'screen and (min-width: 992px)',
+        modifier: css`> .brckwrx-col`,
+      });
+
+      // prettier-ignore
+      expect(tree).toHaveStyleRule('flex-basis', '10%', {
+        media: 'screen and (min-width: 1200px)',
+        modifier: css`> .brckwrx-col`,
+      });
+    });
   });
 });
diff --git a/src/components/tests/__snapshots__/Col.test.js.snap b/src/components/tests/__snapshots__/Col.test.js.snap
index c226550..95defbb 100644
--- a/src/components/tests/__snapshots__/Col.test.js.snap
+++ b/src/components/tests/__snapshots__/Col.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Col /> with added props - 1st set should match snapshot with props 1`] = `
+exports[`<Col /> with added props should match snapshot with props 1`] = `
 .c0 {
   margin: 0;
   box-sizing: border-box;
@@ -44,3 +44,48 @@ exports[`<Col /> with default props/settings should match snapshot 1`] = `
   className="brckwrx-col c0"
 />
 `;
+
+exports[`<Col /> with the grid prop should match snapshot 1`] = `
+.c0 {
+  margin: 0;
+  box-sizing: border-box;
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  padding: 0 !important;
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) {
+  padding-top: calc(1em / 2);
+  padding-bottom: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row {
+  padding-left: calc(1em / 2);
+  padding-right: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col {
+  padding: calc(1em / 2);
+}
+
+.c0 .brckwrx-row {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+<div
+  className="brckwrx-col c0"
+/>
+`;
diff --git a/src/components/tests/__snapshots__/Grid.test.js.snap b/src/components/tests/__snapshots__/Grid.test.js.snap
index 620752e..0e30e78 100644
--- a/src/components/tests/__snapshots__/Grid.test.js.snap
+++ b/src/components/tests/__snapshots__/Grid.test.js.snap
@@ -107,7 +107,6 @@ exports[`<Grid /> with added props should match snapshot with props 1`] = `
 
 <div
   className="brckwrx-grid c0"
-  spacing={true}
 />
 `;
 
diff --git a/src/components/tests/__snapshots__/Row.test.js.snap b/src/components/tests/__snapshots__/Row.test.js.snap
index 40ed941..9bcb69c 100644
--- a/src/components/tests/__snapshots__/Row.test.js.snap
+++ b/src/components/tests/__snapshots__/Row.test.js.snap
@@ -1,6 +1,55 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Row /> should match snapshot 1`] = `
+exports[`<Row /> with added props should match snapshot 1`] = `
+.c0 {
+  box-sizing: border-box;
+  -webkit-flex: 0 1 100%;
+  -ms-flex: 0 1 100%;
+  flex: 0 1 100%;
+  -webkit-order: 2;
+  -ms-flex-order: 2;
+  order: 2;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-flow: row wrap;
+  -ms-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-flow: column nowrap;
+  -ms-flex-flow: column nowrap;
+  flex-flow: column nowrap;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) {
+  padding-top: calc(1em / 2);
+  padding-bottom: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-row {
+  padding-left: calc(1em / 2);
+  padding-right: calc(1em / 2);
+}
+
+.c0:not(.brckwrx-row) :not(.brckwrx-col) .brckwrx-col {
+  padding: calc(1em / 2);
+}
+
+<div
+  className="brckwrx-row c0"
+  order={2}
+/>
+`;
+
+exports[`<Row /> with default props/settings should match snapshot 1`] = `
 .c0 {
   box-sizing: border-box;
   -webkit-flex: 0 1 100%;
diff --git a/src/utils/mediaTemplate.js b/src/utils/mediaTemplate.js
index 4cbe099..48be7da 100644
--- a/src/utils/mediaTemplate.js
+++ b/src/utils/mediaTemplate.js
@@ -10,3 +10,16 @@ export default (breakpoints = defaultBreakpoints) =>
     `;
     return obj;
   }, {});
+
+// export default (breakpoints = defaultBreakpoints) => {
+//   const setBreakpoints = Object.keys(breakpoints).reduce((obj, size) => {
+//     obj[size] = (...args) => css`
+//       @media screen and (min-width: ${breakpoints[size]}) {
+//         ${css(...args)};
+//       }
+//     `;
+//     return obj;
+//   }, {});
+
+//   return setBreakpoints;
+// };
diff --git a/src/utils/tests/mediaTemplate.test.js b/src/utils/tests/mediaTemplate.test.js
new file mode 100644
index 0000000..2e05d00
--- /dev/null
+++ b/src/utils/tests/mediaTemplate.test.js
@@ -0,0 +1,46 @@
+import media from '../mediaTemplate';
+
+describe('Utility function - mediaTemplate', () => {
+  const defaultBreakpoints = {
+    sm: '576px',
+    md: '768px',
+    lg: '992px',
+    xl: '1200px',
+  };
+
+  const mockBreakpoints = {
+    sm: '200px',
+    md: '400px',
+    lg: '600px',
+    xl: '800px',
+    ham: 'sandwich',
+  };
+
+  const testMediaCss = breakpointsObj =>
+    Object.keys(breakpointsObj).forEach(key => {
+      expect(media(breakpointsObj)[key]``[0]).toContain('@media', 'min-width');
+      expect(media(breakpointsObj)[key]``).toEqual(
+        expect.arrayContaining([breakpointsObj[key]])
+      );
+    });
+
+  it('should take no arguments, use default breakpoints, return object with keys sm, md, lg, xl', () => {
+    expect(media()).toHaveProperty('sm');
+    expect(media()).toHaveProperty('md');
+    expect(media()).toHaveProperty('lg');
+    expect(media()).toHaveProperty('xl');
+  });
+
+  it('should take no arguments, use default breakpoints, return correct css', () => {
+    Object.keys(defaultBreakpoints).forEach(key => {
+      expect(media()[key]``[0]).toContain('@media', 'min-width');
+      expect(media()[key]``).toEqual(
+        expect.arrayContaining([defaultBreakpoints[key]])
+      );
+    });
+  });
+
+  it('should accept breakpoints object, "ignore" invalid keys, return correct css', () => {
+    testMediaCss(mockBreakpoints);
+  });
+});