Previous | Tutorial index | Next

Tutorial 5: Tkinter Geometry Managers – Layout Your GUI

Learning Objectives

• Discuss the widgets, functions, classes, and methods provided in the Tkinter module (focus on layout methods).
• Understand the internal algorithms of pack, grid, and place.
• Learn how to create responsive, resizable layouts using weights and sticky options.
• Master the "Golden Rule" of Tkinter layout and learn how to safely nest containers.

1. Introduction – Why Do We Need Geometry Managers?

Imagine you are an architect designing a room. You need to decide where the furniture goes. Do you:

• Stack everything neatly against one wall? (pack() – simple stacking).
• Put things into perfectly aligned rows and columns like a spreadsheet? (grid() – table layout).
• Measure exact distances from the wall with a tape measure? (place() – absolute positioning).

Tkinter gives you these three tools—geometry managers—to arrange widgets inside their parent containers. Each tool has a different philosophy, strengths, and weaknesses.

A critical rule to remember: A single parent container (e.g., a Frame or the root window) can only use ONE geometry manager at a time. If you try to use pack() on one child and grid() on another child of the same parent, your program will freeze or crash. However, you can use different managers in different containers (e.g., pack() in the root, grid() inside a child frame).

Let's dive deep into each manager.

2. Geometry Manager 1: pack() – The Stacker

2.1 How It Works

pack() treats the parent container like a spring-loaded box. It allocates a slice of space to a widget and places it along a specified side. The widgets are "packed" into the container one after another, like books on a shelf.

2.2 Syntax

widget.pack(options)

2.3 Core Options Explained

2.4 The Packing Algorithm (Behind the Scenes)

1. Allocate space – Tkinter determines which side the widget is going to.
2. Claim area – It claims the requested amount of space along that side.
3. Centre/Anchor – If the allocated area is larger than the widget's requested size, the widget is placed inside using the anchor setting.
4. Repeat – The next widget is packed into the remaining space.

2.5 Visual Example: Side-by-Side Comparison

import tkinter as tk
root = tk.Tk()

# Default TOP stacking (vertical)
btn1 = tk.Button(root, text="Top")
btn1.pack(side=tk.TOP)  # Default

btn2 = tk.Button(root, text="Bottom")
btn2.pack(side=tk.BOTTOM)

btn3 = tk.Button(root, text="Left")
btn3.pack(side=tk.LEFT)

btn4 = tk.Button(root, text="Right")
btn4.pack(side=tk.RIGHT)

root.mainloop()

• TOP and BOTTOM stack vertically.
• LEFT and RIGHT stack horizontally.

2.6 Mastering fill and expand

• fill=tk.X makes the widget stretch to fill the entire width of its container.
• expand=True tells Tkinter: "If there is unused space in the container after placing all widgets, give it to this widget."
• Common pattern for a status bar: pack(side=tk.BOTTOM, fill=tk.X).
• Common pattern for a main content area: pack(expand=True, fill=tk.BOTH).

2.7 When to Use pack()

• Simple toolbars (buttons aligned left/right).
• Status bars (stretched at the bottom).
• Linear menus or navigation bars.
• When you have a simple vertical/horizontal stack and don't want to worry about row/column indices.

3. Geometry Manager 2: grid() – The Table Master

3.1 How It Works

grid() treats the container as a spreadsheet divided into rows and columns. You place widgets into specific cells. This is the most versatile and widely used manager for complex forms and applications.

3.2 Syntax

widget.grid(options)

3.3 Core Options Explained

3.4 The Most Overlooked Feature: columnconfigure and rowconfigure

This is critical for responsive GUIs. By default, rows and columns do NOT expand when the window is resized. You must explicitly tell Tkinter which rows/columns should grow to fill extra space using weight.

# Make column 1 expand horizontally and row 1 expand vertically
root.columnconfigure(1, weight=1)
root.rowconfigure(1, weight=1)

• weight – A number that allocates extra space. If two columns have weight=1, they share space equally. If one has weight=2, it gets twice as much extra space.
• minsize – Sets a minimum size for the row/column.
• uniform – Groups columns together so they maintain the same width.

3.5 Mastering sticky

• sticky="w" – left align within the cell.
• sticky="e" – right align.
• sticky="n" – top align.
• sticky="s" – bottom align.
• sticky="ew" – stretch horizontally (equivalent to fill=tk.X in pack).
• sticky="nsew" – stretch both ways (equivalent to fill=tk.BOTH, expand=True in pack).

3.6 Form Example (Login Screen)

import tkinter as tk
root = tk.Tk()

# Configure weights so the grid expands
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=3)
root.rowconfigure(0, weight=1)
root.rowconfigure(1, weight=1)

# Labels on the left (sticky E to align right)
tk.Label(root, text="Username:").grid(row=0, column=0, sticky="e", padx=5, pady=5)
tk.Label(root, text="Password:").grid(row=1, column=0, sticky="e", padx=5, pady=5)

# Entries on the right (sticky EW to fill horizontally)
entry_user = tk.Entry(root)
entry_pass = tk.Entry(root, show="*")
entry_user.grid(row=0, column=1, sticky="ew", padx=5, pady=5)
entry_pass.grid(row=1, column=1, sticky="ew", padx=5, pady=5)

# Submit button spanning 2 columns, centered
btn = tk.Button(root, text="Login")
btn.grid(row=2, column=0, columnspan=2, pady=10)

root.mainloop()

3.7 When to Use grid()

• Most of the time! It is the most predictable and powerful.
• Data entry forms.
• Dashboards with structured panels.
• Any application with precise alignment requirements.

4. Geometry Manager 3: place() – The Manual Measurer

4.1 How It Works

place() allows you to specify the exact pixel coordinates (or relative percentages) of a widget within its container. It gives you total control but sacrifices automatic resizing.

4.2 Syntax

widget.place(options)

4.3 Core Options Explained

4.4 Important Caveat: place and propagate

When using place, the parent container often does not expand to fit the child because the child is not "managed" by pack/grid. To set a fixed size for a frame that uses place, you must disable propagate:

frame = tk.Frame(root, width=200, height=100, bg="lightgrey")
frame.pack_propagate(False)   # Do not shrink to fit children
frame.pack()
label = tk.Label(frame, text="Fixed size frame")
label.place(relx=0.5, rely=0.5, anchor=tk.CENTER)

4.5 When to Use place()

• Very sparingly!
• Overlaying a label on top of a canvas or image (e.g., a watermark).
• Creating custom title bars or splash screens.
• Fine-tuning a specific visual element where other managers are too rigid.
• Warning: Applications built purely with place do not respond well to window resizing and are difficult to maintain.

5. The Golden Rule – Mixing Managers

5.1 Why Can't You Mix pack() and grid() in the Same Parent?

Tkinter's geometry managers are mutually exclusive on a per‑container basis. Each container uses a specific algorithm to calculate the size and position of its children.

When you call pack() on a child, the parent starts using the pack algorithm. If you then call grid() on another child of the same parent, Tkinter's internal layout engine gets confused—it is receiving conflicting size requests from two different solvers, leading to an infinite loop (a freeze).

5.2 The Safe Way – Nesting Frames

You can use different managers in different containers. This is the standard pattern for complex GUIs:

# Root uses pack to split the screen into top and bottom
root = tk.Tk()
top_frame = tk.Frame(root)
bottom_frame = tk.Frame(root)
top_frame.pack(side=tk.TOP, fill=tk.BOTH, expand=True)
bottom_frame.pack(side=tk.BOTTOM, fill=tk.X)

# Top frame uses grid
tk.Label(top_frame, text="Name:").grid(row=0, column=0)
tk.Entry(top_frame).grid(row=0, column=1)

# Bottom frame uses pack (for a status bar/toolbar)
tk.Button(bottom_frame, text="Save").pack(side=tk.LEFT)
tk.Button(bottom_frame, text="Cancel").pack(side=tk.RIGHT)

root.mainloop()

5.3 Summary of Nesting Strategy

1. Root Window: Use pack or grid to divide into major regions.
2. Sub‑Frames: Use whichever manager best fits the layout inside that region.
3. Remember: The root is also a parent container – the same rule applies to it.

6. Choosing the Right Manager – A Decision Guide

Ask yourself these questions:

• Is the layout strictly linear (top‑to‑bottom or left‑to‑right)? → Use pack().
• Does the layout resemble a table/form with row/column alignment? → Use grid().
• Are you trying to overlay or precisely place a widget at a specific pixel coordinate? → Use place(), but only for small details.
• Do you need the GUI to resize beautifully? → grid() with columnconfigure/rowconfigure weights is your best friend. pack() with expand=True is also good. place() is terrible for resizing.

Quiz 1: Multiple Choice

1. Which geometry manager allows you to merge cells using rowspan and columnspan?
   • A) pack()
   • B) grid()
   • C) place()
   • D) All of them

1. You want a widget to stretch horizontally to fill the entire width of its parent, but keep its original height. Which pack() options achieve this?
   • A) expand=True, fill=tk.BOTH
   • B) fill=tk.X
   • C) fill=tk.Y
   • D) side=tk.TOP, expand=True

1. What is the correct way to make column 0 expand when the window is resized using grid()?
   • A) root.grid_column(0, expand=True)
   • B) root.columnconfigure(0, weight=1)
   • C) root.rowconfigure(0, weight=1)
   • D) col0.pack(expand=True)

1. What happens if you call pack() and grid() on two different children of the same parent?
   • A) The layout works fine but looks weird.
   • B) The program runs but ignores the second call.
   • C) The program freezes or crashes.
   • D) Tkinter automatically switches to place().

1. Which option in place() allows you to position a widget exactly in the center of its parent (50% from left, 50% from top)?
   • A) x=0.5, y=0.5
   • B) relx=0.5, rely=0.5
   • C) center=True
   • D) pos="center"

Quiz 2: True or False

1. True / False: The pack() manager can only stack widgets vertically.

1. True / False: Using grid() requires you to specify a row and column for every widget.

1. True / False: If you use place() inside a Frame, the Frame will automatically resize to contain the placed widget.

1. True / False: You can use pack() in the root window and grid() inside a child Frame that is packed into the root.

1. True / False: The sticky="nsew" option in grid() is equivalent to pack(expand=True, fill=tk.BOTH).

Quiz 3: Fill in the Blanks

1. To add external space between widgets in pack, you use ________ and ________.

1. The grid() option that specifies which side of the cell a widget sticks to is called ________.

1. To prevent a Frame from shrinking to fit its children when using place, you call frame.____________(False).

1. The pack() option that determines whether a widget takes up extra space in the container is ________.

1. In grid(), if you want a widget to occupy two columns, you set columnspan=____.

8. Hands‑On Lab (In‑Class Exercises)

Exercise 1: Pack Practice – Toolbar

Create a window that simulates a document editor toolbar:

• Top section: Three buttons arranged horizontally ("New", "Open", "Save") on the left, and one button ("Settings") on the right.
• Bottom section: A status bar (a Label) that stretches fully horizontally at the bottom, with the text "Ready".
• Use only pack().

Exercise 2: Grid Practice – Calculator Layout

Using grid(), create the layout for a simple calculator:

• A Entry widget spanning the top (all 4 columns) for the display.
• Buttons arranged as follows (4 columns, 4 rows):
  • Row 1: 7, 8, 9, /
  • Row 2: 4, 5, 6, *
  • Row 3: 1, 2, 3, -
  • Row 4: 0, ., =, +
• Ensure the buttons stretch to fill their cells.
• Bonus: Make the window resizable and ensure the buttons and display expand accordingly (use columnconfigure with weight=1 and rowconfigure with weight=1 for all).

Exercise 3: Place Practice – Splash Screen Overlay

Create a 300x200 Frame with a light blue background. Inside it, use place() to put a "Loading..." Label exactly in the center of the frame. Also, place a small red square (a Label with bg="red", width=5, height=5) at the bottom‑right corner (relx=1.0, rely=1.0, anchor=tk.SE).

Exercise 4: Nesting Frames – The Kitchen Sink

Design a simple contact manager layout:

1. Top Frame: A title "My Contacts" (Label) – use pack(side=tk.TOP).
2. Middle Frame (Main): Use grid to create a form with labels and entries (Name, Phone, Email).
3. Bottom Frame: Use pack(side=tk.BOTTOM, fill=tk.X) containing three buttons: "Add", "Edit", "Delete" packed side by side (side=tk.LEFT).

import tkinter as tk

root = tk.Tk()
root.title("My Music Player")
root.geometry("600x400")
root.resizable(True, True)

# ---- Top Menu Bar ----
# The menu bar is attached to root, not a frame, but we create a frame for visual consistency (optional)
menu_frame = tk.Frame(root, height=20)
menu_frame.pack(side=tk.TOP, fill=tk.X)

menubar = tk.Menu(root)
root.config(menu=menubar)
file_menu = tk.Menu(menubar, tearoff=0)
menubar.add_cascade(label="File", menu=file_menu)
file_menu.add_command(label="Open")
file_menu.add_command(label="Exit", command=root.destroy)

# ---- Middle Section ----
middle_frame = tk.Frame(root)
middle_frame.pack(side=tk.TOP, fill=tk.BOTH, expand=True)

# Left frame (Playlist) – 60% width
left_frame = tk.Frame(middle_frame)
left_frame.pack(side=tk.LEFT, expand=True, fill=tk.BOTH)

listbox = tk.Listbox(left_frame)
listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)

scrollbar = tk.Scrollbar(left_frame, orient=tk.VERTICAL, command=listbox.yview)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
listbox.config(yscrollcommand=scrollbar.set)

# Right frame (Track Info) – 40% width
right_frame = tk.Frame(middle_frame)
right_frame.pack(side=tk.RIGHT, expand=True, fill=tk.BOTH)

# Configure grid columns/rows for resizing
right_frame.columnconfigure(0, weight=1)   # label column
right_frame.columnconfigure(1, weight=3)   # entry column
right_frame.rowconfigure(0, weight=0)      # title row stays at top
right_frame.rowconfigure(1, weight=1)
right_frame.rowconfigure(2, weight=1)
right_frame.rowconfigure(3, weight=1)

# Now playing label
lbl_now = tk.Label(right_frame, text="Now Playing", font=("Arial", 12, "bold"))
lbl_now.grid(row=0, column=0, columnspan=2, sticky="w", padx=5, pady=5)

# Title
tk.Label(right_frame, text="Title:").grid(row=1, column=0, sticky="e", padx=5, pady=5)
entry_title = tk.Entry(right_frame)
entry_title.grid(row=1, column=1, sticky="ew", padx=5, pady=5)

# Artist
tk.Label(right_frame, text="Artist:").grid(row=2, column=0, sticky="e", padx=5, pady=5)
entry_artist = tk.Entry(right_frame)
entry_artist.grid(row=2, column=1, sticky="ew", padx=5, pady=5)

# Duration
tk.Label(right_frame, text="Duration:").grid(row=3, column=0, sticky="e", padx=5, pady=5)
entry_duration = tk.Entry(right_frame)
entry_duration.grid(row=3, column=1, sticky="ew", padx=5, pady=5)

# ---- Bottom Playback Controls ----
bottom_frame = tk.Frame(root)
bottom_frame.pack(side=tk.BOTTOM, fill=tk.X)

buttons = ["Previous", "Play", "Pause", "Stop", "Next"]
for btn_text in buttons:
    btn = tk.Button(bottom_frame, text=btn_text)
    btn.pack(side=tk.LEFT, padx=5, pady=5)

root.mainloop()

import tkinter as tk

root = tk.Tk()
root.title("Login")

# Error 1: Mixing managers in the root
label = tk.Label(root, text="Username:")
label.grid(row=0, column=0)
entry = tk.Entry(root)
entry.pack(pady=5)

def on_submit():
    print("Submitted")

# Error 2: Trying to grid a button after pack was used on the root
btn = tk.Button(root, text="Submit", command=on_submit)
btn.grid(row=1, column=0)

# Error 3: Forgetting to set row/column weights (not a freeze, but bad design)
root.mainloop()

import tkinter as tk

root = tk.Tk()
root.title("Login")
root.geometry("300x150")
root.resizable(True, True)

# Use grid consistently
root.columnconfigure(0, weight=1)
root.columnconfigure(1, weight=1)
root.rowconfigure(0, weight=1)
root.rowconfigure(1, weight=1)
root.rowconfigure(2, weight=1)

# Row 0: label and entry
label = tk.Label(root, text="Username:")
label.grid(row=0, column=0, sticky="e", padx=5, pady=5)

entry = tk.Entry(root)
entry.grid(row=0, column=1, sticky="ew", padx=5, pady=5)

# Row 1: submit button centered (spanning two columns)
def on_submit():
    print("Submitted")

btn = tk.Button(root, text="Submit", command=on_submit)
btn.grid(row=1, column=0, columnspan=2, pady=10)

root.mainloop()

import tkinter as tk

root = tk.Tk()
root.title("Dynamic Packing")
root.geometry("300x150")

label1 = tk.Label(root, text="Label 1", bg="lightblue", width=10)
label2 = tk.Label(root, text="Label 2", bg="lightgreen", width=10)

# Initial vertical layout
label1.pack(side=tk.TOP, padx=5, pady=5)
label2.pack(side=tk.TOP, padx=5, pady=5)

def toggle_layout():
    # Forget both labels (remove from current layout)
    label1.pack_forget()
    label2.pack_forget()
    # Determine new side based on current layout state
    # We can use a variable to track layout mode, or simply check the side of label1
    # For simplicity, we'll use a global flag
    global vertical
    if vertical:
        # Switch to horizontal
        label1.pack(side=tk.LEFT, padx=5, pady=5)
        label2.pack(side=tk.LEFT, padx=5, pady=5)
    else:
        # Switch to vertical
        label1.pack(side=tk.TOP, padx=5, pady=5)
        label2.pack(side=tk.TOP, padx=5, pady=5)
    vertical = not vertical

vertical = True

btn = tk.Button(root, text="Toggle Layout", command=toggle_layout)
btn.pack(side=tk.BOTTOM, pady=10)

root.mainloop()