Hello everyone! In our previous tutorial section on Tkinter, we covered the Tkinter text widget. Let’s now look at an example of using the Tkinter Grid manager.
But, you may have a question to ask, especially after seeing a lot of people using the pack manager.
Why use Tkinter Grid Manager?
In our previous tutorials, we had been using the pack geometry manager to manage the geometry of our application. But making it work smoothly with a lot of objects is a difficult task.
Therefore, Tkinter introduced other packing managers to make our life a bit easier, and also have some flexibility on when to use what.
The Tkinter Grid manager is actually the easiest to learn and is the most recommended if you’re starting out on building Tkinter applications.
Now that we have this covered, let’s move on to actually using the Grid manager in our application!
NOTE: Never use multiple packing managers in the same Tkinter application. This will cause unintended bugs, and is not recommended at all. Use only one packing manager for a single application.
Using the Tkinter Grid Geometry Manager
Let’s design the below layout using the Grid manager.
This layout will have two entry widgets, with a label for each, and a button widget below.
We will also add an image to the right, and a button widget for the image too.
While this type of layout is hard to manage using pack, we can easily make this using grid!
The steps are simple enough. We just need to create all the widgets we need, and tell the grid manager how to place them.
We’ll first create our master object.
import tkinter as tk
master = tk.Tk()
Now, let’s create two labels first, since we need them on the left most side, and tell the grid manager to place it on the respective row number.
We need the labels at column number 0, indexed by row numbers 0 and 1. After creating the labels, we can directly pack them using grid by using:
label_object.grid(row, col)
So, we can directly write it as follows:
tk.Label(master, text="Label 1").grid(row=0, column=0)
tk.Label(master, text="Label 2").grid(row=1, column=0)
Let’s now add an entry for each of the two labels.
e1 = tk.Entry(master)
e2 = tk.Entry(master)
We have created the entry objects, but now, we need to tell grid to place them in their respective position.
Simply call entry_obj.grid()! This is similar to pack, but overall, is much more smoother to use.
e1.grid(row=0, column=1)
e2.grid(row=1, column=1)
After this, we can add our tkinter main-loop using tk.mainloop().
I’ll post the complete code until this point.
import tkinter as tk
# Create the master object
master = tk.Tk()
# Create the label objects and pack them using grid
tk.Label(master, text="Label 1").grid(row=0, column=0)
tk.Label(master, text="Label 2").grid(row=1, column=0)
# Create the entry objects using master
e1 = tk.Entry(master)
e2 = tk.Entry(master)
# Pack them using grid
e1.grid(row=0, column=1)
e2.grid(row=1, column=1)
# The mainloop
tk.mainloop()
Output
Alright! This seems to work as expected. Now, let’s add a button to it, right below!
button1 = tk.Button(master, text="Button 1")
button1.grid(columnspan=2, row=2, column=0)
Now, we have our left side covered.
Let’s add the image and another button to the right side.
As we discussed the issues of displaying an image on our previous tutorial, we must hold a reference to the PhotoImage object to avoid automatic garbage collection!
from PIL import Image, ImageTk
# Create the PIL image object
image = Image.open("debian.png")
photo = ImageTk.PhotoImage(image)
# Create an image label
img_label = tk.Label(image=photo)
# Store a reference to a PhotoImage object, to avoid it
# being garbage collected! This is necesary to display the image!
img_label.image = photo
img_label.grid(row=0, column=2)
Finally, let’s add a button at the bottom.
# Create another button
button2 = tk.Button(master, text="Button 2")
button2.grid(columnspan=2, row=2, column=2)
Now, I’ll post the complete program here.
import tkinter as tk
from PIL import Image, ImageTk
# Create the master object
master = tk.Tk()
# Create the label objects and pack them using grid
tk.Label(master, text="Label 1").grid(row=0, column=0)
tk.Label(master, text="Label 2").grid(row=1, column=0)
# Create the entry objects using master
e1 = tk.Entry(master)
e2 = tk.Entry(master)
# Pack them using grid
e1.grid(row=0, column=1)
e2.grid(row=1, column=1)
button1 = tk.Button(master, text="Button 1")
button1.grid(columnspan=2, row=2, column=0)
# Create the PIL image object
image = Image.open("debian.png")
photo = ImageTk.PhotoImage(image)
# Create an image label
img_label = tk.Label(image=photo)
# Store a reference to a PhotoImage object, to avoid it
# being garbage collected! This is necesary to display the image!
img_label.image = photo
img_label.grid(row=0, column=2)
# Create another button
button2 = tk.Button(master, text="Button 2")
button2.grid(columnspan=2, row=2, column=2)
# The mainloop
tk.mainloop()
Output
Finally, we’ve completed our layout! And it was as simple as just creating the widgets and telling grid to place them in their correct positions!
Conclusion
In this tutorial, we learned how we could add widgets to our Tkinter application and design layouts using the Tkinter Grid Geometry Manager.
Stay tuned for more Tkinter content!