diff --git a/assets/js/src/common/grid/column.tsx b/assets/js/src/common/grid/column.tsx
new file mode 100644
index 0000000000..07d63d1f4a
--- /dev/null
+++ b/assets/js/src/common/grid/column.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  children?: React.ReactNode,
+  dimension?: 'small',
+};
+
+const Column = ({
+  children,
+  dimension,
+}: Props) => (
+  <div
+    className={
+      classnames(
+        'mailpoet-grid-column',
+        {
+          [`mailpoet-grid-column-${dimension}`]: dimension,
+        }
+      )
+    }
+  >
+    {children}
+  </div>
+);
+
+export default Column;
diff --git a/assets/js/src/common/grid/index.tsx b/assets/js/src/common/grid/index.tsx
new file mode 100644
index 0000000000..c2e319ab94
--- /dev/null
+++ b/assets/js/src/common/grid/index.tsx
@@ -0,0 +1,13 @@
+import Column from './column';
+import TwoColumns from './two_columns';
+import TwoColumnsList from './two_columns_list';
+import ThreeColumns from './three_columns';
+import SpaceBetween from './space_between';
+
+export default {
+  Column,
+  TwoColumns,
+  TwoColumnsList,
+  ThreeColumns,
+  SpaceBetween,
+};
diff --git a/assets/js/src/common/grid/space_between.tsx b/assets/js/src/common/grid/space_between.tsx
new file mode 100644
index 0000000000..7be3dc61c7
--- /dev/null
+++ b/assets/js/src/common/grid/space_between.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import classnames from 'classnames';
+
+type Props = {
+  children?: React.ReactNode,
+  verticalAlign?: 'center',
+};
+
+const SpaceBetween = ({
+  children,
+  verticalAlign,
+}: Props) => (
+  <div
+    className={
+      classnames(
+        'mailpoet-grid-space-between',
+        {
+          [`mailpoet-grid-space-between-vertical-${verticalAlign}`]: verticalAlign,
+        }
+      )
+    }
+  >
+    {children}
+  </div>
+);
+
+export default SpaceBetween;
diff --git a/assets/js/src/common/grid/three_columns.tsx b/assets/js/src/common/grid/three_columns.tsx
new file mode 100644
index 0000000000..ede67dee0c
--- /dev/null
+++ b/assets/js/src/common/grid/three_columns.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const ThreeColumns = ({ children }: Props) => (
+  <div className="mailpoet-grid-three-columns">
+    {children}
+  </div>
+);
+
+export default ThreeColumns;
diff --git a/assets/js/src/common/grid/two_columns.tsx b/assets/js/src/common/grid/two_columns.tsx
new file mode 100644
index 0000000000..c2a211d39b
--- /dev/null
+++ b/assets/js/src/common/grid/two_columns.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const TwoColumns = ({ children }: Props) => (
+  <div className="mailpoet-grid-two-columns">
+    {children}
+  </div>
+);
+
+export default TwoColumns;
diff --git a/assets/js/src/common/grid/two_columns_list.tsx b/assets/js/src/common/grid/two_columns_list.tsx
new file mode 100644
index 0000000000..46dc519260
--- /dev/null
+++ b/assets/js/src/common/grid/two_columns_list.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+type Props = {
+  children?: React.ReactNode,
+};
+
+const TwoColumnsList = ({ children }: Props) => (
+  <div className="mailpoet-grid-two-columns-list">
+    {children}
+  </div>
+);
+
+export default TwoColumnsList;