diff --git a/components/col/__tests__/__snapshots__/index.test.tsx.snap b/components/col/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000..bf656fd
--- /dev/null
+++ b/components/col/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,397 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Col should render correctly 1`] = `ReactWrapper {}`;
+
+exports[`Col should work with span and offset 1`] = `
+initialize {
+  "0": Object {
+    "attribs": Object {},
+    "children": Array [
+      Object {
+        "attribs": Object {
+          "class": "col ",
+        },
+        "children": Array [
+          Object {
+            "data": "col",
+            "next": Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 0%;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+            "parent": [Circular],
+            "prev": null,
+            "type": "text",
+          },
+          Object {
+            "attribs": Object {},
+            "children": Array [
+              Object {
+                "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 0%;
+        }
+      ",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+            ],
+            "name": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": null,
+            "parent": [Circular],
+            "prev": Object {
+              "data": "col",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+            "type": "style",
+            "x-attribsNamespace": Object {},
+            "x-attribsPrefix": Object {},
+          },
+        ],
+        "name": "div",
+        "namespace": "http://www.w3.org/1999/xhtml",
+        "next": Object {
+          "attribs": Object {
+            "class": "col ",
+          },
+          "children": Array [
+            Object {
+              "data": "col",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 8.333333333333334%;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+            Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 8.333333333333334%;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": Object {
+                "data": "col",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+          ],
+          "name": "div",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": null,
+          "parent": [Circular],
+          "prev": [Circular],
+          "type": "tag",
+          "x-attribsNamespace": Object {
+            "class": undefined,
+          },
+          "x-attribsPrefix": Object {
+            "class": undefined,
+          },
+        },
+        "parent": [Circular],
+        "prev": null,
+        "type": "tag",
+        "x-attribsNamespace": Object {
+          "class": undefined,
+        },
+        "x-attribsPrefix": Object {
+          "class": undefined,
+        },
+      },
+      Object {
+        "attribs": Object {
+          "class": "col ",
+        },
+        "children": Array [
+          Object {
+            "data": "col",
+            "next": Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 8.333333333333334%;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": [Circular],
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+            "parent": [Circular],
+            "prev": null,
+            "type": "text",
+          },
+          Object {
+            "attribs": Object {},
+            "children": Array [
+              Object {
+                "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 8.333333333333334%;
+        }
+      ",
+                "next": null,
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+            ],
+            "name": "style",
+            "namespace": "http://www.w3.org/1999/xhtml",
+            "next": null,
+            "parent": [Circular],
+            "prev": Object {
+              "data": "col",
+              "next": [Circular],
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+            "type": "style",
+            "x-attribsNamespace": Object {},
+            "x-attribsPrefix": Object {},
+          },
+        ],
+        "name": "div",
+        "namespace": "http://www.w3.org/1999/xhtml",
+        "next": null,
+        "parent": [Circular],
+        "prev": Object {
+          "attribs": Object {
+            "class": "col ",
+          },
+          "children": Array [
+            Object {
+              "data": "col",
+              "next": Object {
+                "attribs": Object {},
+                "children": Array [
+                  Object {
+                    "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 0%;
+        }
+      ",
+                    "next": null,
+                    "parent": [Circular],
+                    "prev": null,
+                    "type": "text",
+                  },
+                ],
+                "name": "style",
+                "namespace": "http://www.w3.org/1999/xhtml",
+                "next": null,
+                "parent": [Circular],
+                "prev": [Circular],
+                "type": "style",
+                "x-attribsNamespace": Object {},
+                "x-attribsPrefix": Object {},
+              },
+              "parent": [Circular],
+              "prev": null,
+              "type": "text",
+            },
+            Object {
+              "attribs": Object {},
+              "children": Array [
+                Object {
+                  "data": "
+        .col {
+          float: left;
+          box-sizing: border-box;
+          padding-left: calc(var(--row-gap) / 2);
+          padding-right: calc(var(--row-gap) / 2);
+          width: 8.333333333333334%;
+          margin-left: 0%;
+        }
+      ",
+                  "next": null,
+                  "parent": [Circular],
+                  "prev": null,
+                  "type": "text",
+                },
+              ],
+              "name": "style",
+              "namespace": "http://www.w3.org/1999/xhtml",
+              "next": null,
+              "parent": [Circular],
+              "prev": Object {
+                "data": "col",
+                "next": [Circular],
+                "parent": [Circular],
+                "prev": null,
+                "type": "text",
+              },
+              "type": "style",
+              "x-attribsNamespace": Object {},
+              "x-attribsPrefix": Object {},
+            },
+          ],
+          "name": "div",
+          "namespace": "http://www.w3.org/1999/xhtml",
+          "next": [Circular],
+          "parent": [Circular],
+          "prev": null,
+          "type": "tag",
+          "x-attribsNamespace": Object {
+            "class": undefined,
+          },
+          "x-attribsPrefix": Object {
+            "class": undefined,
+          },
+        },
+        "type": "tag",
+        "x-attribsNamespace": Object {
+          "class": undefined,
+        },
+        "x-attribsPrefix": Object {
+          "class": undefined,
+        },
+      },
+    ],
+    "name": "div",
+    "namespace": "http://www.w3.org/1999/xhtml",
+    "next": null,
+    "parent": null,
+    "prev": null,
+    "root": Object {
+      "attribs": Object {},
+      "children": Array [
+        [Circular],
+      ],
+      "name": "root",
+      "namespace": "http://www.w3.org/1999/xhtml",
+      "next": null,
+      "parent": null,
+      "prev": null,
+      "type": "root",
+      "x-attribsNamespace": Object {},
+      "x-attribsPrefix": Object {},
+    },
+    "type": "tag",
+    "x-attribsNamespace": Object {},
+    "x-attribsPrefix": Object {},
+  },
+  "_root": [Circular],
+  "length": 1,
+  "options": Object {
+    "decodeEntities": true,
+    "normalizeWhitespace": false,
+    "withDomLvl1": true,
+    "xml": false,
+  },
+}
+`;
diff --git a/components/col/__tests__/index.test.tsx b/components/col/__tests__/index.test.tsx
new file mode 100644
index 0000000..05f2115
--- /dev/null
+++ b/components/col/__tests__/index.test.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+import { mount, render } from 'enzyme'
+import { Col } from '../../index'
+
+describe('Col', () => {
+  it('should render correctly', () => {
+    const wrapper = mount(<Col>col</Col>)
+    expect(wrapper).toMatchSnapshot()
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should work with span and offset', () => {
+    const wrapper = render(
+      <div>
+        <Col span={2}>col</Col>
+        <Col span={2} offset={2}>col</Col>
+      </div>
+    )
+    expect(wrapper).toMatchSnapshot()
+  })
+  
+  it('should render correctly when nested', () => {
+    const wrapper = mount(<Col><Col><Col />col</Col></Col>)
+    expect(() => wrapper.unmount()).not.toThrow()
+  })
+  
+  it('should render different components', () => {
+    let wrapper = mount(<Col component="p" />)
+    expect(wrapper.find('p').length).not.toBe(0)
+  
+    wrapper = mount(<Col component="details" />)
+    expect(wrapper.find('details').length).not.toBe(0)
+  
+    wrapper = mount(<Col component="h1" />)
+    expect(wrapper.find('h1').length).not.toBe(0)
+  })
+})