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


I want to create a simple layout like this

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.

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


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

Thank you to point me out Css Grid Layout 3.