diff --git a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
index 31a6e4a52..b4255acc9 100644
--- a/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/init-gridstack.ts
@@ -19,7 +19,7 @@ export const initializeGridstack = (
 ) => {
   if (!wrapperRef.current) return;
   // calculates the currently available count of columns
-  const columnCount = areaType === 'sidebar' ? 4 : Math.floor(wrapperRef.current.offsetWidth / 64);
+  const columnCount = areaType === 'sidebar' ? 4 : 12;
   const minRow = areaType !== 'sidebar' ? 1 : Math.floor(wrapperRef.current.offsetHeight / 64);
   // initialize gridstack
   const newGrid = gridRef;
diff --git a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
index fa2255c40..1a3f514ca 100644
--- a/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
+++ b/src/components/Dashboard/Wrappers/gridstack/use-gridstack.ts
@@ -78,7 +78,7 @@ export const useGridstack = (
   // change column count depending on the width and the gridRef
   useEffect(() => {
     if (areaType === 'sidebar') return;
-    gridRef.current?.column(Math.floor(width / 64), 'moveScale');
+    gridRef.current?.column(12);
   }, [gridRef, width]);
 
   const onChange = isEditMode
diff --git a/src/styles/global.scss b/src/styles/global.scss
index 5ba3fcedf..0a5a5db71 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -13,15 +13,24 @@
 }
 
 @for $i from 1 to 13 {
-	.grid-stack>.grid-stack-item[gs-w="#{$i}"]  { width: $i * 64px }
-	.grid-stack>.grid-stack-item[gs-min-w="#{$i}"]  { min-width: $i * 64px }
-	.grid-stack>.grid-stack-item[gs-max-w="#{$i}"]  { max-width: $i * 64px }
+	.grid-stack>.grid-stack-item[gs-w="#{$i}"]  { width: ($i / 12) * 100 + "%" }
+	.grid-stack>.grid-stack-item[gs-min-w="#{$i}"]  { min-width: ($i / 12) * 100 + "%" }
+	.grid-stack>.grid-stack-item[gs-max-w="#{$i}"]  { max-width: ($i / 12) * 100 + "%" }
 }
 
 @for $i from 1 to 13 {
-  .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: $i * 64px; }
-  .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: $i * 64px; }
-  .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: $i * 64px; }
+  .grid-stack>.grid-stack-item[gs-h="#{$i}"] { height: ($i / 12) * 100 + "%" }
+  .grid-stack>.grid-stack-item[gs-min-h="#{$i}"] { min-height: ($i / 12) * 100 + "%" }
+  .grid-stack>.grid-stack-item[gs-max-h="#{$i}"] { max-height: ($i / 12) * 100 + "%" }
+}
+
+@for $i from 1 to 96 {
+	.grid-stack>.grid-stack-item[gs-x="#{$i}"]  { left: ($i / 12) * 100 + "%" }
+}
+
+
+@for $i from 1 to 96 {
+	.grid-stack>.grid-stack-item[gs-y="#{$i}"]  { top: ($i / 12) * 100 + "%" }
 }
 
 .grid-stack>.grid-stack-item>.grid-stack-item-content,
@@ -35,16 +44,7 @@
 }
 
 .grid-stack>.grid-stack-item {
-  min-width: 64px;
-}
-
-@for $i from 1 to 96 {
-	.grid-stack>.grid-stack-item[gs-x="#{$i}"]  { left: $i * 64px }
-}
-
-
-@for $i from 1 to 96 {
-	.grid-stack>.grid-stack-item[gs-y="#{$i}"]  { top: $i * 64px }
+  min-width: (1/12)+'%';
 }
 
 .grid-stack > .grid-stack-item > .grid-stack-item-content {