refactor: initial implementation of form-layout using CSS grid

packages/form-layout/src/vaadin-form-layout-styles.js

@@ -10,12 +10,16 @@ export const formLayoutStyles = css`
     display: block;
     max-width: 100%;
     animation: 1ms vaadin-form-layout-appear;
+    align-self: stretch;
+    container-type: inline-size;
+    container-name: form-grid;
+    --_grid-cols: 10; /* Number of cols, defined by breakpoints. Default value is probably pointless. */
     /* CSS API for host */
+    /* Let's not define defaults here – that way they can be set globally */
     --vaadin-form-item-label-width: 8em;
     --vaadin-form-item-label-spacing: 1em;
     --vaadin-form-item-row-spacing: 1em;
-    --vaadin-form-layout-column-spacing: 2em; /* (default) */
-    align-self: stretch;
+    --vaadin-form-layout-column-spacing: 2em;
   }
 
   @keyframes vaadin-form-layout-appear {
@@ -29,21 +33,20 @@ export const formLayoutStyles = css`
   }
 
   #layout {
-    display: flex;
-
-    align-items: baseline; /* default \`stretch\` is not appropriate */
-
-    flex-wrap: wrap; /* the items should wrap */
+    display: grid;
+    grid-template-columns: repeat(var(--_grid-cols), 1fr);
+    column-gap: var(--vaadin-form-layout-column-spacing);
+    row-gap: var(--vaadin-form-item-row-spacing);
+    align-items: baseline;
+    justify-content: stretch;
+    min-width: min-content;
   }
 
   #layout ::slotted(*) {
-    /* Items should neither grow nor shrink. */
-    flex-grow: 0;
-    flex-shrink: 0;
-
-    /* Margins make spacing between the columns */
-    margin-left: calc(0.5 * var(--vaadin-form-layout-column-spacing));
-    margin-right: calc(0.5 * var(--vaadin-form-layout-column-spacing));
+    /* Unless auto-rows is on, each field starts on a new line */
+    grid-column-start: 1;
+    /* Span is set via custom prop set by the WC; capped by current breakpoint's column count */
+    grid-column-end: span min(var(--vaadin-form-layout-colspan), var(--_grid-cols));
   }
 
   #layout ::slotted(br) {
@@ -56,7 +59,6 @@ export const formItemStyles = css`
     display: inline-flex;
     flex-direction: row;
     align-items: baseline;
-    margin: calc(0.5 * var(--vaadin-form-item-row-spacing, 1em)) 0;
   }
 
   :host([label-position='top']) {