Explanations of the issue
This GIST was created to explain an issue we are going to encounter when we start using responsive forms. In short, the current spacing between rows and columns is different (40px between columns and 26px between rows) When switching from row layout to column layout (on small screens) the gaps will not be consistent between each form controls.
the gap between the elements of the same row will be correct (26px) but the gap between each row will be (26px) resulting in a very strange looking form.
The current api of the layout library (@angular/flex-layout) would mean we'd have to write something like this: