1. Cells of GridBagLayout & GridBagLayoutConstraints
The GridBagLayout packs controls in a grid of cells just like GridLayout. The change is, in GridLayout all the cells take up an equal amount of space and one cell can hold only one control in it. But in GridBagLayout, we can add a component to hold more cells. We can do this via the GridBagConstraints. Now look at the below picture:

Here, the GridBagLayout comprises of 16 cells. In x axis, we have 4 slots and in y axis we have 4 slots. These together form a grid of 16 cells. The gridx and gridy properties of GridBagConstraints represents these slots. In the above picture you can also see placement of the 9 buttons and how they vary in size.
The properties gridheight & gridwidth tell how many cells a control must cover. The gridwidth property spawns a control horizontally and gridheight property spawns it vertically. In this example, we will create 9 buttons and add it to the AWT Frame window, which is managed by GridBagLayout. Along the way, we will learn about the gridx, gridy, gridwidth and gridheight properties of the GridBagConstraints.
2. Button 1 and 2 – Learn gridx, gridwidth of GridBagConstraints
First, we create all the nine buttons. Then set GridBagLayout to the AWT Frame. Below is the code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
public class FrameWindow extends Frame implements WindowListener { public FrameWindow(String FrameTitle) { //Display the Frame Window super(FrameTitle); setSize(460, 200); setLocation(100,100); addWindowListener(this); //Sample 01: Create 9 Buttons and Set Grid bag Layout Button btn1 = new Button("Btn 1"); Button btn2 = new Button("Btn 2"); Button btn3 = new Button("Btn 3"); Button btn4 = new Button("Btn 4"); Button btn5 = new Button("Btn 5"); Button btn6 = new Button("Btn 6"); Button btn7 = new Button("Btn 7"); Button btn8 = new Button("Btn 8"); Button btn9 = new Button("Btn 9"); GridBagLayout gbl = new GridBagLayout(); setLayout(gbl); |
In this section, we want to add button 1 and 2 in the first row of the GridBagLayout
. Also, we want to give equal weight for both the buttons and hence we set the
weightx and
weighty as 1 in the GridBagConstraints. We set the
fill method as
BOTH and this tells the GridBagLayout
to expand the buttons to coverup the full space of the Frame.
1 2 3 4 5 |
//Sample 02: Get Gridbag Layout GridBagConstraints gcon = new GridBagConstraints(); gcon.weightx = 1; gcon.weighty = 1; gcon.fill = GridBagConstraints.BOTH; |
Before adding button 1, we set its location on the GridBagLayout by setting the gridx & gridy properties of the GridBagConstraints. Next, we set gridwidth as 2 and gridheight as 1. This means button 1 will occupy two slots in the first row and one slot in the height. You can refer the first picture again.
1 2 3 4 5 6 7 8 9 |
//Sample 03: Add Btn1 & Btn2 //3.1 Prepare Contraints for Btn 1 gcon.gridy = 0; gcon.gridx = 0; gcon.gridwidth = 2; gcon.gridheight=1; //3.2 Add Control gbl.setConstraints(btn1, gcon); add(btn1); |
We use same GridBagConstraints object and make some change in its properties. We like to add button 2 in the same row after button 1. So we change only gridx from 0 to 2 before adding button 2. From the GridBagConstraints, the GridBagLayout knows that the location of the button 2 is starting in the third slot of the first row.
1 2 3 4 5 6 |
//3.3 Prepare Contraints for Btn 2 gcon.gridx = 2; //3.4 Add Control gbl.setConstraints(btn2, gcon); add(btn2); |
Now, if we run the code, it produces the following output:

At this stage, the GridBagLayout
knows it has four cells in x direction. But it treats there is only one cell in the y direction.
3. Add Button 3 …6 – Learn gridy of GridBagConstraints
We want to add the next set of buttons in the second row and hence we need to set gridy = 2
. In this second row; we want to add four buttons. In the previous row, we have two buttons: those occupy the full width of the Frame with gridwidth=2
. Now, we need to set gridwidth
as 1 for next four buttons so that each button in this second will occupy one cell space.
Before adding these 4 buttons, we keep on changing the
gridx value to position them in the second row, one after another. Also note, we fix the gridy=2
; for all these four buttons. This tells the GridBagLayout
to keep all these 4 buttons in the second row. By this time, the layout manager knows it contains 4 cells in X direction and 2 cells in Y direction. Have a look at the below code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//Sample 04: Add Btn3, Btn4, Btn5, Btn6 gcon.gridy = 1; gcon.gridwidth = 1; gcon.gridx = 0; gbl.setConstraints(btn3, gcon); add(btn3); gcon.gridx = 1; gbl.setConstraints(btn4, gcon); add(btn4); gcon.gridx = 2; gbl.setConstraints(btn5, gcon); add(btn5); gcon.gridx = 3; gbl.setConstraints(btn6, gcon); add(btn6); |
By running the above code, we can get the following result:

The above screen shows how six buttons are placed in the Frame. You can notice, no change in the AWT Frame
size to provide room for additional 4 buttons. The GridBagLayout
manager reduced the button 1 and button 2 size and gave room for these 4 buttons. Button 1 and 2 have
gridwidth of 2 while all four buttons in the second row are having
gridwidth of 1.
4. Add Button 7 & 8 – Learn gridx, gridy & gridwidth
For button 7, we set following GridBagConstraints
:
- gridx=0: Tells to start button 7 at very first cell location in the x direction.
- gridy=2: Tells to start button7 in the third cell location in the y direction. Now, GridBagLayout knows the demand for the third row.
- gridwidth=3: GridBagLayout allocates three cells for button 7.
For button 8, we provide gridy as 3 to indicate the existence of the fourth row in the vertical cell stack and other GridBagConstraints are same for button 8. Note, in the below code, the line numbers 11 and 9 are not required as we again set same property values for button 8.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
//Sample 05: Add Btn 7 gcon.gridx = 0; gcon.gridy = 2; gcon.gridwidth =3; gbl.setConstraints(btn7, gcon); add(btn7); //Sample 06: Add Btn 8 gcon.gridx = 0; gcon.gridy = 3; gcon.gridwidth = 3; gbl.setConstraints(btn8, gcon); add(btn8); |
At this stage running the code will produce the following result. Note down the empty, unoccupied space in the AWT Frame. We will fill this space with button 9 in the next section.
After adding button 7:

After adding button 8:

5. Add Button 9 – Learn gridheight of GridBagConstraints
The below code adds Button 9 in the empty unused space of the GridBagLayout
. Below are the properties set for the GridBagConstraints
:
- gridx=3: Start button 9 in the 4th cell location because, first three cells are occupied by button 7.
- gridy=2: Start button 9 in the third row.
- gridwidth=1: Occupy one cell width horizontally.
- gridheight=2: Occupy two cells height vertically (i.e.) third and fourth row.
The code is below:
1 2 3 4 5 6 7 |
//Sample 07: Add Btn 9 gcon.gridx = 3; gcon.gridy = 2; gcon.gridwidth = 1; gcon.gridheight = 2; gbl.setConstraints(btn9, gcon); add(btn9); |
Running the above code will produce the following result:

6. Complete Code Example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
package AwtDemoPkg; import java.awt.Button; import java.awt.Frame; import java.awt.GridBagConstraints; import java.awt.GridBagLayout; import java.awt.event.WindowEvent; import java.awt.event.WindowListener; public class FrameWindow extends Frame implements WindowListener { public FrameWindow(String FrameTitle) { //Display the Frame Window super(FrameTitle); setSize(460, 200); setLocation(100,100); addWindowListener(this); //Sample 01: Create 9 Buttons and Set Grid bag Layout Button btn1 = new Button("Btn 1"); Button btn2 = new Button("Btn 2"); Button btn3 = new Button("Btn 3"); Button btn4 = new Button("Btn 4"); Button btn5 = new Button("Btn 5"); Button btn6 = new Button("Btn 6"); Button btn7 = new Button("Btn 7"); Button btn8 = new Button("Btn 8"); Button btn9 = new Button("Btn 9"); GridBagLayout gbl = new GridBagLayout(); setLayout(gbl); //Sample 02: Get Gridbag Layout GridBagConstraints gcon = new GridBagConstraints(); gcon.weightx = 1; gcon.weighty = 1; gcon.fill = GridBagConstraints.BOTH; //Sample 03: Add Btn1 & Btn2 //3.1 Prepare Contraints for Btn 1 gcon.gridy = 0; gcon.gridx = 0; gcon.gridwidth = 2; gcon.gridheight=1; //3.2 Add Control gbl.setConstraints(btn1, gcon); add(btn1); //3.3 Prepare Contraints for Btn 2 gcon.gridx = 2; //3.4 Add Control gbl.setConstraints(btn2, gcon); add(btn2); //Sample 04: Add Btn3, Btn4, Btn5, Btn6 gcon.gridy = 1; gcon.gridwidth = 1; gcon.gridx = 0; gbl.setConstraints(btn3, gcon); add(btn3); gcon.gridx = 1; gbl.setConstraints(btn4, gcon); add(btn4); gcon.gridx = 2; gbl.setConstraints(btn5, gcon); add(btn5); gcon.gridx = 3; gbl.setConstraints(btn6, gcon); add(btn6); //Sample 05: Add Btn 7 gcon.gridx = 0; gcon.gridy = 2; gcon.gridwidth =3; gbl.setConstraints(btn7, gcon); add(btn7); //Sample 06: Add Btn 8 gcon.gridx = 0; gcon.gridy = 3; gcon.gridwidth = 3; gbl.setConstraints(btn8, gcon); add(btn8); //Sample 07: Add Btn 9 gcon.gridx = 3; gcon.gridy = 2; gcon.gridwidth = 1; gcon.gridheight = 2; gbl.setConstraints(btn9, gcon); add(btn9); } public void windowOpened(WindowEvent e) {} public void windowClosed(WindowEvent e) {} public void windowIconified(WindowEvent e) {} public void windowDeiconified(WindowEvent e) {} public void windowActivated(WindowEvent e) {} public void windowDeactivated(WindowEvent e) {} public void windowClosing(WindowEvent e) { this.dispose(); } } |
7. Watch Example as YouTube Video
Categories: AWT
Tags: GridBagConstraints, GridBagConstraints.gridheight, GridBagConstraints.gridwidth, GridBagConstraints.gridx, GridBagConstraints.gridy, GridBagLayout