How to create proportional layout with height (60%:40%) and width (70%:30%)

Flow
1

Greetings,

I want to create a simple layout like this

Screenshot 2024-03-24 at 17.13.36
Screenshot 2024-03-24 at 17.13.361524×836 20.8 KB

Height 40%:60% shows porpotion above table data and below table (or grid in vaadin).

Width 70%:30% shows porpotion before spider chart and after spider chart.

How to create this layout? Is it possible to create with VericalLayout and Horizontal layout? I know with cards, it can be solved easily but it is pro feature. I prefer without it.

Any suggestion is welcomed.

Thanks in advance.
sl

2

Check out Css Grid Layout 3 - Vaadin Add-on Directory

3

Greetings,

Thanks @SimonMartinelli I am looking on it and playing with it right now.

Thank you to point me out Css Grid Layout 3.

Regards
sLawalata