Automatic resizing of rectangles in a Pane using Java FX-8

Question

I am trying to create a grid of rectangles that will be contained inside a pane using JavaFX. I want these rectangles to be automatically resized to occupy the space available based on the size of the Pane, with a small gap between the rectangles.

The code I am using right now is this, the createVisual function is called to generate the group containing the pane :

public class Visualizer extends NodePart {
    private VBox m_vbox;
    private AnchorPane m_pane;

    public static class ResizableRectanble extends javafx.scene.shape.Rectangle {
        public ResizableRectangle(double w, double h) {
            super(w,h);
        }
        @Override
        public boolean isResizable() {
            return true;
        }
        @Override
        public void resize(double width, double height) {
            setWidth(width);
            setHeight(height);
        }
    }

    @Override
    protected Group createVisual() {
        final Group group = new Group() {
            @Override
            public boolean isResizable() {
                return true;
            }
            @Override
            public void resize(double w, double h) {
                m_pane.setPrefSize(w,h);
            }
        };
        m_pane = new AnchorPane();
        m_pane.setStyle("-fx-background-color : lightcyan; -fx-border-color: silver; -fx-border-width: 3;");
        m_pane.setPrefSize(100, 100);
        m_pane.setMouseTransparent(false);

        m_vbox = new VBox(3.0);
        m_vbox.setFillWidth(true);
        m_vbox.setMouseTransparent(false);

        for(int i=0; i<16; i++) {
            HBox hbox = new HBox(3.0);
            hbox.setAlignment(Pos.CENTER);
            for(int j=0; j<4; j++) {
                Rectangle rect = new ResizableRectangle(50.0,50.0);
                rect.setStyle("-fx-fill: lime; -fx-border-color: red; -fx-border-width: 3;");
                hbox.setHgrow(rect, Priority.ALWAYS);
                hbox.getChildren().add(rect);   
                hbox.setFillHeight(true);
            }
        }
        m_vbox.setVGrow(hbox, Priority.ALWAYS); 
        m_pane.setTopAnchor(m_vbox, 5.0);
        m_pane.setBottomAnchor(m_vbox, 5.0);
        m_pane.getChildren().add(m_vbox);
        group.getChildren().add(m_pane);
        return group;
    }
}

This does not really work as the width of the rectangle is not changed from the initial value when the group size change. The height of the rectangles is also very small and there is a lot more than 3.0 pixel between them.

I have also tried to set up left and right anchor on m_vbox, but it does not seem to work as the rectangles get resized to less than half the size of the pane with that.

I have tried using a GridPane and constraints on the columns and row, but it does not work either as there is overlap. I would prefer to use the VBox and HBox combination if possible.

This function is called by Eclipse GEF (Graphical Editing Framework) to create a node in a graph. I am using GEF version 5 in Eclipse Neon.

I am a beginner with JavaFX, any help would be much appreciated !

Edit, the code I have tried using GridPane :

public class Visualizer extends NodePart {
    private GridPane m_gridPane;

    public static class ResizableRectanble extends javafx.scene.shape.Rectangle {
        public ResizableRectangle(double w, double h) {
            super(w,h);
        }
        @Override
        public boolean isResizable() {
            return true;
        }
        @Override
        public void resize(double width, double height) {
            setWidth(width);
            setHeight(height);
        }
    }

    @Override
    protected Group createVisual() {
        final Group group = new Group() {
            @Override
            public boolean isResizable() {
                return true;
            }
            @Override
            public void resize(double w, double h) {
                m_gridPane.setPrefSize(w,h);
            }
        };
        m_gridPane = new GridPane();
        m_gridPane.setStyle("-fx-background-color : lightcyan; -fx-border-color: silver; -fx-border-width: 3;");
        m_gridPane.setPrefSize(100, 100);
        m_gridPane.setMouseTransparent(false);

        for(int i=0; i<16; i++) {
            for(int j=0; j<4; j++) {
                if(i == 0) {
                    ColumnConstraints cc = new ColumnConstraints();
                    cc.setFillWidth(true);
                    cc.setHgrow(Priority.ALWAYS);
                    m_gridPane.getColumnConstraints().add(cc);
                }

                Rectangle rect = new ResizableRectangle(50.0,50.0);
                rect.setStyle("-fx-fill: lime; -fx-border-color: red; -fx-border-width: 3;");
                m_gridPane.add(rect, j, i);
            }
            RowConstraints rc = new RowConstraints();
            rc.setFillHeight(true);
            rc.setVgrow(Priority.ALWAYS);
            m_gridPane.getRowConstraints().add(rc);
        }
        group.getChildren().add(m_gridPane);
        return group;
    }
}

Edit 2 : The code using GridPane works and the nodes are not overlapping. However, the borders of the rectangles are not shown, which led me to believe that there was overlapping.