Form spacing is incorrect when using a grid

Polaris
1

Hello,

When using a grid or any other element not being a form field, the spacing end up being incorrect:

image
image1216×244 21 KB

To reproduce this issue:

<s-grid gridTemplateColumns="repeat(2, minmax(0, 1fr))" gap="small-200">
  <s-text-field label="Postal code"></s-text-field>
  <s-text-field label="State"></s-text-field>
</s-grid>

<s-text-field label="City"></s-text-field>

Creating those kind of layout is quite common so Polaris should try to better organize the fields.

Note: I still believe having a / would simplify a lot this, and would also allow to make it easier to have other fields layout (for instance to have fields where the label is inline - as in the theme editor or metafield editor -, such an abstraction would help:

<s-fieldset direction="inline">
  // Show all fields in a layout optimized for more compact layout
</s-fieldset>