JavaFX: Resizing Panes when resizing window

Question

I'm trying to build a simple Java project which contains 6 Panes (added to GridPane Layout as parent). I had to set up window size at the beginning, and managed to split them evenly by referring to the width and height of the root layout.

pane.setMinSize(root.getWidth()/3, root.getHeight()/2);

But I want them to resize as I change the size of the window (using a mouse, now they get fixed size).

So my question is, how can I accomplish this in JavaFX? How can I make elements stretch and fill in the size of a layout/part of the layout and later change size when resizing the window?

Here is my code:

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;


public class Main6 extends Application {

@Override
public void start(Stage primaryStage) throws Exception {

    GridPane root = new GridPane();
    Scene scene = new Scene(root, 900, 600);

    Pane pane1 = new Pane();
    pane1.setBackground(new Background(new BackgroundFill(Color.GREEN, CornerRadii.EMPTY, Insets.EMPTY)));
    pane1.setMinSize(root.getWidth()/3, root.getHeight()/2);

    Pane pane2 = new Pane();
    pane2.setBackground(new Background(new BackgroundFill(Color.WHITE, CornerRadii.EMPTY, Insets.EMPTY)));
    pane2.setMinSize(root.getWidth()/3, root.getHeight()/2);

    Pane pane3 = new Pane();
    pane3.setBackground(new Background(new BackgroundFill(Color.GREY, CornerRadii.EMPTY, Insets.EMPTY)));
    pane3.setMinSize(root.getWidth()/3, root.getHeight()/2);

    Pane pane4 = new Pane();
    pane4.setBackground(new Background(new BackgroundFill(Color.BLUE, CornerRadii.EMPTY, Insets.EMPTY)));
    pane4.setMinSize(root.getWidth()/3, root.getHeight()/2);

    Pane pane5 = new Pane();
    pane5.setBackground(new Background(new BackgroundFill(Color.RED, CornerRadii.EMPTY, Insets.EMPTY)));
    pane5.setMinSize(root.getWidth()/3, root.getHeight()/2);

    Pane pane6 = new Pane();
    pane6.setBackground(new Background(new BackgroundFill(Color.YELLOW, CornerRadii.EMPTY, Insets.EMPTY)));
    pane6.setMinSize(root.getWidth()/3, root.getHeight()/2);

    root.getChildren().addAll(pane1, pane2, pane3, pane4, pane5, pane6);
    GridPane.setRowIndex(pane1, 0);
    GridPane.setColumnIndex(pane1, 0);
    GridPane.setRowIndex(pane2, 0);
    GridPane.setColumnIndex(pane2, 1);
    GridPane.setRowIndex(pane3, 0);
    GridPane.setColumnIndex(pane3, 2);
    GridPane.setRowIndex(pane4, 1);
    GridPane.setColumnIndex(pane4, 0);
    GridPane.setRowIndex(pane5, 1);
    GridPane.setColumnIndex(pane5, 1);
    GridPane.setRowIndex(pane6, 1);
    GridPane.setColumnIndex(pane6, 2);

    primaryStage.setTitle("Learning JavaFX");
    primaryStage.setScene(scene);
    primaryStage.show();
}

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

Answer 1

Ok, I found partly a solution. I added to my code:

    ColumnConstraints column1 = new ColumnConstraints();
    column1.setPercentWidth(33.333333);
    ColumnConstraints column2 = new ColumnConstraints();
    column2.setPercentWidth(33.333333);
    ColumnConstraints column3 = new ColumnConstraints();
    column3.setPercentWidth(33.333333);
    root.getColumnConstraints().addAll(column1, column2, column3);

    RowConstraints row1 = new RowConstraints();
    row1.setPercentHeight(50);
    RowConstraints row2 = new RowConstraints();
    row2.setPercentHeight(50);
    root.getRowConstraints().addAll(row1, row2);

and removed all the lines setting size of the Panes, and it allowed for resizing the content.

BUT

when I specify percentage width to (100/3) instead of 33.3333 it leaves a weird white space on the right side of the window. Can somebody explain to me why is this happening?

Take a look: