added notes menu

src/components/containers/Columns/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+
+import Masonry from 'react-masonry-css';
+
+import styles from './styles.module.scss';
+
+const defaultColumns = {
+  default: 2,
+  1280: 1,
+};
+
+interface ColumnsProps {
+  cols?: Record<number, number>;
+}
+
+const Columns: FC<ColumnsProps> = ({ children, cols = defaultColumns }) => (
+  <Masonry className={styles.wrap} breakpointCols={cols} columnClassName={styles.column}>
+    {children}
+  </Masonry>
+);
+
+export { Columns };

src/components/containers/Columns/styles.module.scss

@@ -0,0 +1,27 @@
+@import "src/styles/variables";
+@import "src/styles/mixins";
+
+div.wrap {
+  display: flex;
+  width: 100%;
+  margin-right: 0;
+  padding: $gap $gap * 0.5;
+
+  @include tablet {
+    padding: 0 $gap * 0.5;
+  }
+}
+
+.column {
+  background-clip: padding-box;
+  box-sizing: border-box;
+  padding: 0 $gap * 0.5;
+
+  @include tablet {
+    padding: 0;
+  }
+
+  & > div {
+    margin-bottom: $gap;
+  }
+}