GUI Python with Tkinter – Part 4 – The grid() geometry manager

The grid geometry manager organizes the container frame into a table with rows and columns. Each cell in the table can hold one widget. Widgets can span multiple cells.

Example:

Let’s create a login window using the grid() geometry manager. I placed all the code in a file named test04.py.

from tkinter import *
root = Tk()

label1 = Label(root, text = "Username")
label1.grid(row = 0, sticky = W)
label2 = Label(root, text = "Password")
label2.grid(row = 1, sticky = W)
entry1 = Entry(root)
entry1.grid(row = 0, column = 1, sticky = E)
entry2 = Entry(root)
entry2.grid(row = 1, column = 1, sticky = E)
button1 = Button(root, text = "Login")
button1.grid(row = 2, column = 1, sticky = E)

root.mainloop()

We aligned the position of each widget using the sticky option. The sticky option decides how the widget is expanded. The sticky option can be specified using one of the cardinal points.

Note:
Not specifying any value, defaults to stickiness to the center of the widget in the cell.

If you run the file in the terminal you will get something like this:

Tkinter grid geometry manager

The sticky = W makes the labels stick on the left side.
The width and the height of each column is decided automatically. You can specify the width for widgets if you want total control.
The sticky = NSEW argument makes the widget expandable and fills the entire cell of the grid.

Your widgets can span across multiple cells in the grid. For that you can use the options rowspan and columnspan.

The padx and pady options allow you to set a padding around a widget. The ipadx and ipady options are used for internal padding. The default value of an external and internal padding is 0.

Let’s use these options in an example. I created another file named test05.py and I placed all the code for this example in it.

from tkinter import *
root = Tk()

root.title('Motorcycles')
Label(root, text = "Brand:").grid(row = 0, column = 0, sticky = E)
Entry(root, width = 35).grid(row = 0, column = 1, padx = 2, pady = 2, sticky = 'we', columnspan = 4)
Label(root, text="Model:").grid(row = 1, column = 0, sticky = E)
Entry(root).grid(row = 1, column = 1, padx = 2, pady = 2, sticky = 'we', columnspan = 4)
Button(root, text = "Find").grid(row = 0, column = 5, sticky = E + W, padx = 2, pady = 2)
Button(root, text = "Options").grid(row = 1, column = 5, sticky = E + W, padx = 2)
Button(root, text = "Custom").grid(row = 2, column = 5, sticky = E + W, padx = 2)
Button(root, text = "Reset").grid(row = 3, column = 5, sticky = E + W, padx = 2)
Checkbutton(root, text = "Retro").grid(row = 2, column = 1, columnspan = 2, sticky = W)
Checkbutton(root, text = "Accesories").grid(row = 3, column = 1, columnspan = 2, sticky = W)
Checkbutton(root, text = "Delivered").grid(row = 4, column = 1, columnspan = 2, sticky = W)
Label(root, text = "Color:").grid(row = 2, column = 3, sticky = W, padx = 8)
Radiobutton(root, text = "Red", value = 1).grid(row = 3, column = 3, sticky = W)
Radiobutton(root, text = "Blue", value = 2).grid(row = 3, column = 3, sticky = E)

root.mainloop()

If you run the file in the terminal you should get something like shown below:

Tkinter grid geometry manager

Other grid() options commonly used are widget.grid_forget() and widget.grid_remove() methods. There are many more! For a complete grid reference, type the following command in the Python shell:

>>> import tkinter
>>> help(tkinter.Grid)

You can configure a grid’s column and row sizes to override the default customization given automatically. The height of all the grid rows (and columns) is automatically adjusted to be the height of its tallest cell.

To override this automatic sizing of columns and rows you can use something like shown below:

widget_name.columnconfigure(n, option = value, ...)
widgen_name.rowconfigure(N, option = value, ...)

Use these to configure the options for a given widget, widget_name , in either the nth column or the nth row. You can specify minsize, pad, and weight.

Example:

w.columnconfigure(0, weight = 2)
w.columnconfigure(1, weight = 4)

Two-sixths of the extra space is allocated to the first column and four-sixths to the second column.

Note:
The columnconfigure() and rowconfigure() methods are often used for dynamic resizing of widgets.

Leave a Reply