JavaFX: GridPane Overview

Serious, focused young man working at laptop — Caiaimage/Agnieszka Olek / Getty Images

By

Updated on January 31, 2019

The

GridPane

class creates a JavaFX

Nodes can be placed in each cell of the grid and can span multiple cells either vertically or horizontally. By default the rows and columns will be sized to fit their content - that is the widest child node defines the column width and the tallest child node the row height.

Import Statement

import javafx.scene.layout.GridPane;

Constructors

The

GridPane


GridPane playerGrid = new GridPane();


   Useful Methods  

Child nodes are added to theGridPane


 //Place the Text control in column 1, row 8
 Text rank4 = new Text("4");
 playerGrid.add(rank4, 0,7);



Note: The column and row index starts at 0. So the first cell positioned at column 1, row 1 has an index of 0, 0.



Child nodes can also span multiple columns or rows. This can be specified in theadd


//Here the Text control is spanning 4 columns and 1 row
 Text title = new Text("Top Scorers in English Premier League");
 playerGrid.add(title, 0,0,4,1);




Child nodes contained within the
GridPane
 can have their alignment along the horizontal or vertical axis by using the setHalignment
 and setValignment


 GridPane.setHalignment(goals4, HPos.CENTER);



Note: The
VPos
 enum contains four constant values to define the vertical position: BASELINE
, BOTTOM
, CENTER
 and TOP
. The HPos
 enum only contains three values for the horizontal position: CENTER
, LEFT
 and RIGHT



The padding of child nodes can also be set by using the
setPadding
 method. This method takes the child node being set and Insets


 //set the padding for all the cells in the GridPane
 playerGrid.setPadding(new Insets(0, 10, 0, 10));




The spacing between the columns and rows can be defined by using the
setHgap
 and setVgap


 playerGrid.setHgap(10);
playerGrid.setVgap(10);



ThesetGridLinesVisible


 playerGrid.setGridLinesVisible(true);


   Usage Tips  

If two nodes are set to be displayed in the same cell then they will overlap in the JavaFX scene. 



Columns and rows can be set to a preferred width and height through the use of
RowConstraints
 and ColumnConstraints
. These are separate classes that can be used to control the size. Once defined they are added to the GridPane
 by using the getRowConstraints().addAll
 and getColumnConstraints().addAll


GridPane
 objects can be styled using JavaFX CSS. All the CSS properties defined under Region



To see the
GridPane
 layout in action have a look at the GridPane Example Program. It shows how to place
Text