JavaFX - Layout GridPane


If we use Grid Pane in our application, all the nodes that are added to it are arranged in a way that they form a grid of rows and columns. This layout comes handy while creating forms using JavaFX.

The class named GridPane of the package javafx.scene.layout represents the GridPane. This class provides eleven properties, which are −

  • alignment − This property represents the alignment of the pane and you can set value of this property using the setAlignment() method.

  • hgap − This property is of the type double and it represents the horizontal gap between columns.

  • vgap − This property is of the type double and it represents the vertical gap between rows.

  • gridLinesVisible − This property is of Boolean type. On true, the lines of the pane are set to be visible.

Following are the cell positions in the grid pane of JavaFX −

(0, 0) (1, 0) (2, 0)
(2, 1) (1, 1) (0, 1)
(2, 2) (1, 2) (0, 2)


The following program is an example of the grid pane layout. In this, we are creating a form using a Grid Pane.

Save this code in a file with the name

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.geometry.Pos; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.GridPane; 
import javafx.scene.text.Text; 
import javafx.scene.control.TextField; 
import javafx.stage.Stage; 

public class GridPaneExample extends Application { 
   public void start(Stage stage) {      
      //creating label email 
      Text text1 = new Text("Email");       
      //creating label password 
      Text text2 = new Text("Password"); 
      //Creating Text Filed for email        
      TextField textField1 = new TextField();       
      //Creating Text Filed for password        
      TextField textField2 = new TextField();  
      //Creating Buttons 
      Button button1 = new Button("Submit"); 
      Button button2 = new Button("Clear");  
      //Creating a Grid Pane 
      GridPane gridPane = new GridPane();    
      //Setting size for the pane  
      gridPane.setMinSize(400, 200); 
      //Setting the padding  
      gridPane.setPadding(new Insets(10, 10, 10, 10)); 
      //Setting the vertical and horizontal gaps between the columns 
      //Setting the Grid alignment 
      //Arranging all the nodes in the grid 
      gridPane.add(text1, 0, 0); 
      gridPane.add(textField1, 1, 0); 
      gridPane.add(text2, 0, 1);       
      gridPane.add(textField2, 1, 1); 
      gridPane.add(button1, 0, 2); 
      gridPane.add(button2, 1, 2);  
      //Creating a scene object 
      Scene scene = new Scene(gridPane);  
      //Setting title to the Stage 
      stage.setTitle("Grid Pane Example"); 
      //Adding scene to the stage 
      //Displaying the contents of the stage; 
   public static void main(String args[]){ 

Compile and execute the saved java file from the command prompt using the following commands.

java GridPaneExample

On executing, the above program generates a JavaFX window as shown below.

Grid Pane