Missing GridLayout in Vaadin 14

Vaadin 8 has a Layout that is using a CSS grid to layout parts of a component Vaadin Grid Layout. With the help of this layout, you could have a grid, with cells spanning both horizontally and vertically over multiple columns and rows. Now in Vaadin 14 there is no GridLayout any longer. Vaadin tells us that now that FormLayout supports multiple Columns, in a way it replaces GridLayout (link). I think that's not true for different reasons.

contextually a FormLayout is supposed to be used on a form. But what if we want to layout other components?
with GridLayout you have control over exactly where in the grid you want to place an element. I am yet to find a way to do that in a FormLayout
there is no way to make elements span multiple rows as discussed on github

Feel free to edit this question to add more points to this list.

Are there any good alternatives? (besides downgrading to vaadin 8, which is not a real alternative.) One obvious solution would be to use a Polymertemplate or a Littemplate, but a solution working only with Java would certainly be preferred. Another solution might be to put Layouts in other Layouts to build a layout that looks like a grid layout. But this would probably be harder to maintain.

Solution

Take a look at Css Grid Layout in the Vaadin component directory.

There is a demo here

It supports row and column spanning e.g. this example from the demo using the FluentGridLayout.withItemWithSize() method:

public class FlexibleGridLayoutExample2 extends HorizontalLayout {
    public FlexibleGridLayoutExample2() {
        FlexibleGridLayout layout = new FlexibleGridLayout()
                .withColumns(Repeat.RepeatMode.AUTO_FILL, new MinMax(new Length("190px"), new Flex(1)))
                .withAutoRows(new Length("190px"))
                .withItems(
                        new ExampleCard(), new ExampleCard())
                .withItemWithSize(new ExampleCard(), 2, 2) // add item with a custom size (2 rows and 2 cols)
                .withItems(
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(),
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(),
                        new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), new ExampleCard(), 
                        new ExampleCard(), new ExampleCard(), new ExampleCard()
                )
                .withPadding(true)
                .withSpacing(true)
                .withAutoFlow(GridLayoutComponent.AutoFlow.ROW_DENSE) // allow the item order to be changed to let elements fill empty spaces.
                .withOverflow(GridLayoutComponent.Overflow.AUTO);
        layout.setSizeFull();
        setSizeFull();
        add(layout);
    }
}

You can also specify cell start and end positions using the FluentGridLayout. withRowAndColumn() method:

public class CssGridLayoutExample1 extends VerticalLayout {
    public CssGridLayoutExample1() {
        Component alignTestComponent = new ExampleCard();
        FluentGridLayout layout = new FluentGridLayout()
               .withTemplateRows(new Flex(1), new Flex(1), new Flex(1))
               .withTemplateColumns(new Flex(1), new Flex(1), new Flex(1))
               .withColumnAlign(alignTestComponent, GridLayoutComponent.ColumnAlign.END)
               .withRowAlign(alignTestComponent, GridLayoutComponent.RowAlign.END)
               .withRowAndColumn(alignTestComponent, 1, 1, 1, 3)
               .withRowAndColumn(new ExampleCard(), 2, 1)
               .withRowAndColumn(new ExampleCard(), 2, 2)
               .withRowAndColumn(new ExampleCard(), 1, 3, 3, 3);
        layout.setSizeFull();
        setSizeFull();
        add(layout);
    }
}