Grid() Method – Grid Geometry Manager

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!


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top