Refactor FormLayout to use css grid instead of FlexBox #4583
Description
Describe your motivation
There are several issues caused by the way the CSS FlexBox model treats the implicit width of a flexbox container. Detailed description here: vaadin/flow-components#2201 (comment)
In addition to issues caused directly by this, FlexBox is also indirectly a partial cause for the following issues:
- forced align-self: stretch Regression: align-self: stretch change is affecting horizontal flex #991
- alignment bug [form-layout] Fields do not align when colspan is used with form-items #1072
- Manual break bug FormLayout responsiveness fails with Dialog when line break used flow-components#1055
- alignment bug (probably) Wrong component alignment on mobile flow-components#1613
Additionally, the following might be easier to solve with a different approach:
- Custom field widths FormLayout: optionally turn off auto width calculation for items and allow setting item width manually #676
- Vert.spacing as part of label [form-layout] Item label should not define a top margin #1121
Describe the solution you'd like
Refactor FormLayout to use css grid instead of FlexBox.
A proof-of-concept implementation can be found here:
https://github.com/vaadin/web-components/blob/refactor/formlayout-css-grid/packages/form-layout/src/vaadin-form-layout.js
https://github.com/vaadin/web-components/blob/refactor/formlayout-css-grid/packages/form-layout/src/vaadin-form-item.js
Describe alternatives you've considered
I've been unable to find a solution as long as the component's layouting is based on FlexBox.
Additional context
No response