Grid() Method – Grid Geometry Manager
Introduction
Welcome to this tutorial on using the Grid Geometry Manager in Tkinter. This is part of our Tkinter series, where we explore different geometry managers to create graphical user interfaces (GUIs) using Python. If you haven’t yet explored our previous tutorial on the Pack Geometry Manager, we recommend checking it out for a better understanding.
Why Use Grid Geometry Manager?
While the Pack Geometry Manager allows for efficient layout design, it can become complicated when working with multiple frames or adjusting widgets precisely. The Grid Geometry Manager simplifies this process by providing an intuitive way to arrange elements in a tabular structure.
How To Use Grid Geometry Manager In Tkinter
Before diving deep, let’s look at a basic example of Grid Geometry Manager usage:
from tkinter import ttk
import tkinter as tk
app_main_window = tk.Tk()
label0 = ttk.Label(app_main_window, text=”Label 1″, background =’Orange’)
label1 = ttk.Label(app_main_window, text=”Label 2″, background =’Green’)
label2 = ttk.Label(app_main_window, text=”Label 3″, background =’Blue’)
label3 = ttk.Label(app_main_window, text=”Label 4″, background =’Magenta’)
label0.grid(row=0, column=0)
label1.grid(row=0, column=1)
label2.grid(row=1, column=1)
label3.grid(row=1, column=2)
app_main_window.mainloop()
As seen above, the Grid Manager structures widgets into rows and columns, making alignment straightforward.
Row and Column Options in Tkinter
The Grid Geometry Manager works like a table, where we define widgets based on row and column indices. Unlike the Pack Manager, this method allows easy customization and precise placement of elements.
Rowspan and Columnspan Options
Sometimes, we need a widget to span multiple rows or columns. This can be achieved using rowspan and columnspan properties.
label1.grid(row=0, column=0, rowspan=2)
label2.grid(row=1, column=1, columnspan=2)
This ensures that widgets expand across multiple rows or columns as required.
Resizing Widgets with Grid()
You might have noticed that dragging the GUI window does not resize widgets. To make a responsive GUI, we use rowconfigure and columnconfigure options.
app_main_window.rowconfigure(0, weight=1)
app_main_window.columnconfigure(0, weight=1)
This creates a “liquid UI” that dynamically adjusts widget sizes based on the window size.
Sticky Option in Grid()
By default, the Grid Manager places widgets in the center of a cell. The sticky option allows placement customization using compass directions (N, S, E, W).
label0.grid(row=0, column=0, sticky=’W’) # Aligns widget to the left
label1.grid(row=1, column=1, sticky=’E’) # Aligns widget to the right
Creating a Responsive UI Using Grid()
Below is an example of creating a flexible, responsive Tkinter UI using Grid Manager:
from tkinter import *
from tkinter import ttk
root = Tk()
content = ttk.Frame(root, padding=(3, 3, 12, 12))
Text1 = Text(content, borderwidth=5, relief=”ridge”, width=20, height=10)
submit_button_label = ttk.Label(content, text=”Submit Comment: “)
Exit = ttk.Button(content, text=”Exit”)
Submit = ttk.Button(content, text=”Submit”)
content.grid(column=0, row=0, sticky=(N, S, E, W))
Text1.grid(column=2, row=0, columnspan=3, rowspan=2, sticky=(N, S, E, W))
submit_button_label.grid(column=0, row=0, columnspan=2, sticky=(N, W), padx=5)
Exit.grid(column=2, row=2)
Submit.grid(column=3, row=2)
root.columnconfigure(0, weight=1)
root.rowconfigure(0, weight=1)
content.columnconfigure(0, weight=1)
content.columnconfigure(1, weight=1)
content.columnconfigure(2, weight=1)
content.rowconfigure(0, weight=1)
root.mainloop()
This example implements a responsive design where widgets adjust based on window size.
Padding in Grid Layout Manager
Padding improves the spacing between widgets, making them look more visually appealing. Tkinter provides padx and pady options to manage horizontal and vertical padding.
label1.grid(row=0, column=0, padx=10, pady=10)
To adjust internal padding within widgets, use ipadx and ipady:
label2.grid(row=1, column=1, ipadx=5, ipady=5)
Full Example of Padding & Sticky Options
from tkinter import *
from tkinter import ttk
root = Tk()
l = ttk.Label(root, text=”First Label”, background=’green’, anchor=’center’)
l.grid(row=0, column=1, sticky=’e’, padx=40, pady=40, ipadx=40, ipady=40)
m = ttk.Label(root, text=”Star Label”, background=’red’, anchor=’center’)
m.grid(row=1, column=1, sticky=’w’, padx=30, pady=30, ipadx=30, ipady=30)
s = ttk.Label(root, text=”Third Label”, background=’yellow’, anchor=’center’)
s.grid(row=2, column=1, sticky=’e’, padx=20, pady=20, ipadx=20, ipady=20)
k = ttk.Label(root, text=”Fourth Label”, background=’orange’, anchor=’center’)
k.grid(row=3, column=1, sticky=’w’, padx=10, pady=10, ipadx=10, ipady=10)
root.columnconfigure(1, weight=3)
root.mainloop()
Conclusion
In this tutorial, we explored the Grid Geometry Manager, an essential layout manager in Tkinter. We covered its core functionality, including row and column placement, rowspan and columnspan usage, sticky alignment, padding, and creating a dynamic UI.
If you have any questions, feel free to leave them in the comments. Stay tuned for our next tutorial, where we will dive into the Place Geometry Manager for further UI customization!