Replace grid with flex column

Author: TrySound

apps/builder/app/shared/tailwind/tailwind.test.tsx

@@ -536,7 +536,9 @@ test("generate space without display property", async () => {
         <ws.element
           ws:tag="div"
           ws:style={css`
-            display: grid;
+            display: flex;
+            flex-direction: column;
+            align-items: start;
             row-gap: 1rem;
           `}
         ></ws.element>

apps/builder/app/shared/tailwind/tailwind.ts

@@ -243,10 +243,20 @@ const parseTailwindClasses = async (classes: string) => {
     });
   }
   if (hasRowGaps && !hasFlexOrGrid) {
-    parsedStyles.unshift({
-      property: "display",
-      value: { type: "keyword", value: "grid" },
-    });
+    parsedStyles.unshift(
+      {
+        property: "display",
+        value: { type: "keyword", value: "flex" },
+      },
+      {
+        property: "flex-direction",
+        value: { type: "keyword", value: "column" },
+      },
+      {
+        property: "align-items",
+        value: { type: "keyword", value: "start" },
+      }
+    );
   }
   adaptBreakpoints(parsedStyles);
   const newClasses = classes