How to span columns of a gridpane manually in javafx?

There is a very good solution by @James_D up there. In my code, i was assigning same sizes to all vBoxes. So there is another solve of this problem - actually we can call it fixing basic mistake. Here is working code piece :

public class Main extends Application {

    @Override
    public void start(Stage primaryStage) throws Exception {
        Group root = new Group();
        primaryStage.setTitle("Hello World");
        Scene scene = new Scene(root, 650, 550);



        VBox zoneTopLeft = createBaseContainer(300,300);
        VBox zoneTopRight = createBaseContainer(300,300);
        VBox zoneBottomLeft = createBaseContainer(200,200);
        VBox zoneBottomRight = createBaseContainer(400,200);


        GridPane page=new GridPane();
        page.setHgap(10);
        page.setVgap(10);
        page.add(zoneTopLeft, 0, 0);
        page.setColumnSpan(zoneTopLeft, 2);
        page.add(zoneTopRight, 2, 0);
        page.setColumnSpan(zoneTopRight,2);
        page.add(zoneBottomLeft, 0, 1);
        page.add(zoneBottomRight, 1, 1);
        page.setColumnSpan(zoneBottomRight,3);

        root.getChildren().addAll(page);


        primaryStage.setScene(scene);
        primaryStage.show();


    }

    private VBox createBaseContainer(double width,double height) {
        VBox base = new VBox(); // box
        base.setPrefWidth(width);
       base.setPrefHeight(height);
        base.setStyle("-fx-border-width: 1;-fx-border-color: red");
        //  base.prefWidthProperty().bind(scene.widthProperty());

        BorderPane top = new BorderPane(); // top area of base
        top.prefWidthProperty().bind(base.prefWidthProperty());
        top.setPrefHeight(33);
        top.setLeft(setBaseTitle());
        top.setRight(setBaseButtons());
        top.setStyle("-fx-border-width: 1;-fx-border-color: blue");

        StackPane bottom = new StackPane(); // bottom are of base, content keeper

        base.getChildren().addAll(top, bottom);
        return base;
    }


    private Node setBaseButtons() {
        return new HBox();
    }

    private Node setBaseTitle() {

        return new Label();
    }


    public static void main(String[] args) {
        launch(args);
    }
}

To do this with a GridPane, think of it as having three columns with widths 40%, 10%, and 50%. The top left node spans the first and second column, the top right just the third column. The bottom left is only in the first column, the bottom right spans the second and third column.

Something like:

|   c1   |c2|     c3    |
_________________________
|-----------|-----------|
|--------|--------------|

In code, do something like:

Node topLeft ;
Node topRight ;
Node bottomLeft ;
Node bottomRight ;

GridPane page = new GridPane();
// page.add(Node, colIndex, rowIndex, colSpan, rowSpan):
page.add(topLeft, 0, 0, 2, 1);
page.add(topRight, 2, 0, 1, 1);
page.add(bottomLeft, 0, 2, 1, 1);
page.add(bottomRight, 1, 1, 2, 1);


ColumnConstraints col1Constraints = new ColumnConstraints();
col1Constraints.setPercentWidth(40);
ColumnConstraints col2Constraints = new ColumnConstraints();
col2Constraints.setPercentWidth(10);
ColumnConstraints col3Constraints = new ColumnConstraints();
col3Constraints.setPercentWidth(50);
page.getColumnConstraints().addAll(col1Constraints, col2Constraints, col3Constraints);

Edit: text changed from getColumnContraints to getColumnConstraints.