From ef2b6016cdd69e88f48bb175aa6275b62346be1a Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Fri, 2 Aug 2019 05:06:30 +0700
Subject: [PATCH] amazing cell editor

---
 .../examples/HorizontalExample/index.tsx           | 14 ++++++++------
 .../examples/HorizontalExample/styles.scss         |  7 +++++++
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/containers/examples/HorizontalExample/index.tsx b/src/containers/examples/HorizontalExample/index.tsx
index d479b010..520b4cf4 100644
--- a/src/containers/examples/HorizontalExample/index.tsx
+++ b/src/containers/examples/HorizontalExample/index.tsx
@@ -7,7 +7,6 @@ import {InputText} from "~/components/input/InputText";
 import {Button} from "~/components/input/Button";
 import {Filler} from "~/components/containers/Filler";
 import {Icon} from "~/components/input/Icon";
-import {CellGrid} from "~/components/containers/CellGrid";
 
 interface IProps {}
 
@@ -15,11 +14,14 @@ const HorizontalExample: FC<IProps> = () => (
   <div className={styles.wrap}>
     <Card seamless className={styles.card}>
       <div className={styles.editor}>
-        <Padder className={styles.uploads}>
-          <CellGrid size={150}>
-            <div className={styles.cell} />
-          </CellGrid>
-        </Padder>
+        <div className={styles.uploads}>
+          <div className={styles.cell} />
+          <div className={styles.cell} />
+          <div className={styles.cell} />
+          <div className={styles.cell} />
+          <div className={styles.cell} />
+          <div className={styles.cell} />
+        </div>
 
         <Padder className={styles.features}>
           <Group horizontal>
diff --git a/src/containers/examples/HorizontalExample/styles.scss b/src/containers/examples/HorizontalExample/styles.scss
index 27edf24a..3fc66f17 100644
--- a/src/containers/examples/HorizontalExample/styles.scss
+++ b/src/containers/examples/HorizontalExample/styles.scss
@@ -68,7 +68,14 @@
 
 .uploads {
   flex: 1;
+  padding: $gap;
   padding-bottom: 0;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  display: grid;
+  align-items: center;
+  justify-content: center;
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
 }
 
 .cell {