javavaadinvaadin14

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.

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);
        }
    }