2. tk geometry grid
The grid geometry manager allows you to arrange widgets within a root.
2.1. grid
Each row and column in the grid is identified by an index. By default, the indices start at zero.
The row and column indexes can have gaps. This is useful when you plan to add more widgets in the middle of the grid later.
The intersection of a row and a column is called a cell. One widget can be placed in a cell.
To place multiple widgets in a cell, use a Frame or LabelFrame to wrap the widgets and place the Frame or LabelFrame on the cell.
The width of a column depends on the width of the widget it contains.
The height of a row depends on the height of the widgets contained within the row.
- widget.grid(row=index_r, column=index_c)
- Use grid() method to position a widget on a grid at row index_r and column index_c.e.g. widget.grid(row=0, column=0)
2.1.1. Options
Specify multiple rows and columns for widget uisng rowspan or columnspan.
Specify cell alignment. Use the sticky option to align the position of the widget on a cell and define how the widget will be stretched.
Specify padding. Use ipadx, ipady and padx, pady to add internal and external paddings.
2.1.2. rowspan
- widget.grid(row=index_r, column=index_c, rowspan=n)
- Specify number of rows, n, for a widget to span acrosse.g. grid(row=0, column=0, rowspan=2) to span the widget across 2 rows.
2.1.3. columnspan
- widget.grid(row=index_r, column=index_c, columnspan=n)
- Specify number of columns, n, for a widget to span acrosse.g. grid(row=0, column=0, columnspan=2) to span the widget across 2 columns.
2.1.4. sticky
- widget.grid(row=index_r, column=index_c, sticky=direction)
- Make the widget stick to the specified sides of the cell.e.g. widget.grid(row=0, column=0, sticky="ew") to make it expand horizontally.
2.1.5. padx
- widget.grid(row=index_r, column=index_padxc, padx=n)
- Add horizontal padding, n pixels, on both sides of the widget.e.g. widget.grid(row=0, column=0, padx=10) to add 10 pixels of space on the left and on the right of the widget.
2.1.6. pady
- widget.grid(row=index_r, column=index_c, pady=n)
- Add vertical padding, n pixels, above and below the widget.e.g. widget.grid(row=0, column=0, pady=10) to add 10 pixels of space above and below the widget.
2.1.7. ipadx
- widget.grid(row=index_r, column=index_c, ipadx=n)
- Add horizontal internal padding, n pixels, on both sides of the widget.e.g. widget.grid(row=0, column=0, ipadx=10) to grow the widget to the left and right, by 10 pixels each.
2.1.8. ipady
- widget.grid(row=index_r, column=index_c, ipady=n)
- Add vertical internal padding, n pixels, above and below the widget.e.g. widget.grid(row=0, column=0, ipady=10) to grow the widget by 10 pixels above and below the widget.
2.2. Example code
import tkinter as tk
# Create the main application window
root = tk.Tk()
root.title("grid")
root.geometry("200x150")
# define widgets
label1 = tk.Label(root, text="label 1", bg="light blue")
label2 = tk.Label(root, text="label 2", bg="light blue")
label3 = tk.Label(root, text="label 3", bg="light blue")
label4 = tk.Label(root, text="label 4", bg="light green")
# place widgets in grid layout
label1.grid(row=0, column=0)
label2.grid(row=1, column=1)
label3.grid(row=2, column=2)
label4.grid(row=3, column=0, columnspan=3, sticky="ew")
# Start the main event loop
root.mainloop()
2.2.1. notes
For grid, empty rows or columns are not allocated screen space.
Grid determines how much space a widget can occupy, not how much it does occupy.
By default, widgets are placed in the middle of a grid cell.
2.2.2. columnconfigure and rowconfigure
This may be useful when designing GUIs that need to adapt to different screen sizes.
The allows widgets to stretch in size when the window is resized.
Use the columnconfigure() and rowconfigure() methods to specify the weight of a column and a row of a grid.
- widget.columnconfigure(column, option=value, ...)
- Configure the column properties of a widget container, typically a Frame or Grid.widget: The widget container (e.g., Frame, Grid) for which to configure the columns.column: The index of the column to configure, starting from 0. Use a tuple such as (0, 1, 2) for several columns.Specify options such as minimum size, weight, and stretching behavior for the column within the container.
option=value: Options for configuring the column include:
minsize: Specifies the minimum size of the column.
weight: Resizes column on window resizing. Determines how much any extra space is distributed among columns. Columns with higher weights will get more space.
uniform: If set to a string value, columns with the same value will be of the same size.
pad: Specifies padding to add around the column.
e.g. root.columnconfigure(1, weight=2, pad=10)
- widget.rowconfigure(row, option=value, ...)
- Configure the row properties of a widget container, typically a Frame or Grid.Specify options such as minimum size, weight, and stretching behavior for the row within the container.