fix(Form): fix tab order (#665)

Closes #645

Author: MarcusNotheis

packages/main/src/components/Form/Form.jss.ts

@@ -8,7 +8,52 @@ const styles = {
     columnGap: '0.5rem',
     gridTemplateColumns: `repeat(12, 1fr)`,
     '--ui5wcr_form_full_span': 'span 12',
-    '--ui5wcr_form_label_text_align': 'end'
+    '--ui5wcr_form_label_text_align': 'end',
+    '&[data-columns="1"]': {},
+    '&[data-columns="2"]': {
+      gridTemplateColumns: `repeat(24, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 24'
+    },
+    '&[data-columns="3"]': {
+      gridTemplateColumns: `repeat(36, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 36'
+    },
+    '&[data-columns="4"]': {
+      gridTemplateColumns: `repeat(48, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 48'
+    },
+    '&[data-columns="5"]': {
+      gridTemplateColumns: `repeat(60, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 60'
+    },
+    '&[data-columns="6"]': {
+      gridTemplateColumns: `repeat(72, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 72'
+    },
+    '&[data-columns="7"]': {
+      gridTemplateColumns: `repeat(84, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 84'
+    },
+    '&[data-columns="8"]': {
+      gridTemplateColumns: `repeat(96, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 96'
+    },
+    '&[data-columns="9"]': {
+      gridTemplateColumns: `repeat(108, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 108'
+    },
+    '&[data-columns="10"]': {
+      gridTemplateColumns: `repeat(120, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 120'
+    },
+    '&[data-columns="11"]': {
+      gridTemplateColumns: `repeat(132, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 132'
+    },
+    '&[data-columns="12"]': {
+      gridTemplateColumns: `repeat(144, 1fr)`,
+      '--ui5wcr_form_full_span': 'span 144'
+    }
   },
   formTitle: {
     borderBottom: `1px solid ${ThemingParameters.sapGroup_TitleBorderColor}`,