How do I add empty spaces in FormLayout in Vaadin Flow?

Question

For example if I have form with 2 columns and 2 rows but want to keep the 2nd column in the first 1st empty how do I do this without adding an empty value (empty Span).

-----------------
| field | empty |
-----------------
| field | field |
-----------------

Right now I'm doing:

formLayout.add(new TextField("First row and first column"));
formLayout.add(new Span());
formLayout.add(...);
.. and so on.

I could just do formLayout.add(textField, new Span(), textField, ...) but in either case my question is how can I have the FormLayout skip a cell in the first row after the initial TextField?

Answer 1

FormLayout is not purposed to be rigid grid. You can add empty components, or Br component to break a row, which will work better than empty Span.

You can also adjust col-span of FormItem to span it wider than a column. But FormLayout is also responsive, so if you make Browser narrower, it will reflow the fields. Empty components would make it look odd as there are not likely to be place as you want.

You can also set responsive steps to control whether four, three, two, .. columns are shown on different Browser widths:

formLayout.setResponsiveSteps(
       new ResponsiveStep("25em", 1),
       new ResponsiveStep("32em", 2),
       new ResponsiveStep("40em", 3));

In theory you can adjust the responsive steps so that layout is more rigid.

I would assume that a Div component where you set css-grid styles according to what you want to achieve may server you better than FormLayout in this case.