{"id":1304,"date":"2020-11-29T02:09:17","date_gmt":"2020-11-29T02:09:17","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=1304"},"modified":"2025-04-04T14:51:42","modified_gmt":"2025-04-04T14:51:42","slug":"tkinter-grid","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-grid\/","title":{"rendered":"Tkinter Grid"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to use the Tkinter grid geometry manager to position widgets on a window.<\/p>\n\n\n\n

Introduction to the Tkinter grid geometry manager #<\/a><\/h2>\n\n\n\n

The grid geometry manager uses the concepts of rows and columns to arrange the widgets<\/a> on a window<\/a> or frame<\/a>.<\/p>\n\n\n\n

The following picture shows a grid that consists of four rows and three columns:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Each row and column in the grid is identified by an index. By default, the first row has an index of zero, the second row has an index of one, and so on. Likewise, the columns in the grid have indexes of zero, one, two, etc.<\/p>\n\n\n\n

The indexes of rows and columns in a grid don’t have to start at zero. Additionally, indexes of the row and column can have gaps. For example, you can have a grid whose column indexes are 1, 2, 10, 11, and 12. The gaps can be useful when you plan to add more widgets in the middle of the grid later.<\/p>\n\n\n\n

The intersection of a row and a column is called a cell<\/strong>. A cell is an area where you can place a widget. A cell can show only one widget at a time. If you place two or more widgets in a cell, they’ll be on top of each other.<\/p>\n\n\n\n

To place multiple widgets in a cell, you use a container like a Frame<\/a><\/code> or LabelFrame<\/a><\/code> to wrap the widgets and place container on the cell.<\/p>\n\n\n\n

The column’s width depends on the width of the widget it contains. Similarly, the row’s height depends on the height of the widgets contained within the row.<\/p>\n\n\n\n

Rows and columns can span. The following picture shows a grid with the cell (1,1) that spans two columns and the cell (0,2) that spans two rows:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Setting up the grid #<\/a><\/h2>\n\n\n\n

Before positioning widgets on a grid, you’ll need to configure the rows and columns of the grid. Tkinter provides you with two methods for configuring grid rows and columns:<\/p>\n\n\n

container<\/span>.columnconfigure<\/span>(index<\/span>, weight<\/span>)\ncontainer<\/span>.rowconfigure<\/span>(index<\/span>, weight<\/span>)<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
The columnconfigure()<\/code> method configures the column index<\/code> of a grid. The  weight<\/code> determines how wide the column will occupy, which is relative to other columns. <\/p>\n\n\n\n
For example, a column with a weight of 2 will be twice as wide as a column with a weight of 1.<\/p>\n\n\n\n
Positioning a widget on the grid #<\/a><\/h2>\n\n\n\n
To place a widget on the grid, you use the widget’s grid()<\/code> method:<\/p>\n\n\n
widget.grid(**options)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The grid()<\/code> method has the following parameters:<\/p>\n\n\n\n
Parameters<\/th>Meaning<\/th><\/tr><\/thead>
column<\/td>The column index where you want to place the widget.<\/td><\/tr>
row<\/td>The row index where you want to place the widget.<\/td><\/tr>
rowspan<\/td>Set the number of adjacent rows that the widget can span.<\/td><\/tr>
columnspan<\/td>Set the number of adjacent columns that the widget can span.<\/td><\/tr>
sticky<\/td>If the cell is large than the widget, the sticky<\/code> option specifies which side the widget should stick to and how to distribute any extra space within the cell that is not taken up by the widget at its original size.<\/td><\/tr>
padx<\/td>Add external padding above and below the widget.<\/td><\/tr>
pady<\/td>Add external padding to the left and right of the widget.<\/td><\/tr>
ipadx<\/td>Add internal padding inside the widget from the left and right sides.<\/td><\/tr>
ipady<\/td>Add internal padding inside the widget from the top and bottom sides.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Sticky #<\/a><\/h3>\n\n\n\n
By default, when a cell is larger than the widget it contains, the grid geometry manager places the widget at the center of the cell horizontally and vertically.<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
To change this default behavior, you can use the sticky<\/code> option. The sticky<\/code> option specifies which edge of the cell the widget should stick to.<\/p>\n\n\n\n
The sticky<\/code> has the following valid values:<\/p>\n\n\n\n
Sticky<\/th>Description<\/th><\/tr><\/thead>
N<\/td>North or Top Center<\/td><\/tr>
S<\/td>South or Bottom Center<\/td><\/tr>
E<\/td>East or Right Center<\/td><\/tr>
W<\/td>West or Left Center<\/td><\/tr>
NW<\/td>North West or Top Left<\/td><\/tr>
NE<\/td>North East or Top Right<\/td><\/tr>
SE<\/td>South East or Bottom Right<\/td><\/tr>
SW<\/td>South West or Bottom Left<\/td><\/tr>
NS<\/td>NS stretches the widget vertically. However, it leaves the widget centered horizontally.<\/td><\/tr>
EW<\/td>EW stretches the widget horizontally. However, it leaves the widget centered vertically.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
If you want to position the widget in the corner of the cell, you can use the N, S, E, and W.<\/p>\n\n\n\n
The following picture illustrates how to position a widget with the sticky option set to N<\/code>:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
If you want to position the widget centered against one side of the cell, you can use the NW (top left), NE (top right), SE (bottom right), and SW (bottom left).<\/p>\n\n\n\n
The following example shows how to position a widget with the sticky option set to NW<\/code>:<\/p>\n\n\n
\n
\"Tkinter<\/figure>\n<\/div>\n\n\n
NS stretches the widget vertically. However, it leaves the widget centered horizontally:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
EW stretches the widget horizontally. However, it leaves the widget centered vertically:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
Padding #<\/a><\/h3>\n\n\n\n
To add paddings between cells of a grid, you use the padx<\/code> and pady<\/code> options. The padx<\/code> and pady<\/code> are external paddings:<\/p>\n\n\n
grid(column, row, sticky, padx, pady)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
To add paddings within a widget itself, you use ipadx<\/code> and ipady<\/code> options. The ipadx<\/code> and ipady<\/code> are internal paddings:<\/p>\n\n\n
grid(column, row, sticky, padx, pady, ipadx, ipady)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
The internal and external paddings default to zero.<\/p>\n\n\n\n
Tkinter grid geometry manager example #<\/a><\/h2>\n\n\n\n
In this example, we’ll use the grid geometry manager to design a login screen as follows:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
The login screen uses a grid that has two columns and three rows. Also, the second column is three times as wide as the first column:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n
The following shows the complete login window:<\/p>\n\n\n
import<\/span> tkinter as<\/span> tk\nfrom<\/span> tkinter import<\/span> ttk\n\n# main window<\/span>\nroot = tk.Tk()\nroot.geometry(\"240x100\"<\/span>)\nroot.title('Login'<\/span>)\n\n\n# grid 3x2<\/span>\nroot.rowconfigure(0<\/span>, weight=1<\/span>)\nroot.rowconfigure(1<\/span>, weight=1<\/span>)\nroot.rowconfigure(2<\/span>, weight=1<\/span>)\nroot.columnconfigure(0<\/span>, weight=1<\/span>)\nroot.columnconfigure(1<\/span>, weight=3<\/span>)\n\n\n# username<\/span>\nusername_label = ttk.Label(root, text=\"Username:\"<\/span>)\nusername_label.grid(column=0<\/span>, row=0<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\nusername_entry = ttk.Entry(root)\nusername_entry.grid(column=1<\/span>, row=0<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\n# password<\/span>\npassword_label = ttk.Label(root, text=\"Password:\"<\/span>)\npassword_label.grid(column=0<\/span>, row=1<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\npassword_entry = ttk.Entry(root,  show=\"*\"<\/span>)\npassword_entry.grid(column=1<\/span>, row=1<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\n# login button<\/span>\nlogin_button = ttk.Button(root, text=\"Login\"<\/span>)\nlogin_button.grid(column=1<\/span>, row=3<\/span>, sticky=tk.E, padx=5<\/span>, pady=5<\/span>)\n\n\nroot.mainloop()\n<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works.<\/p>\n\n\n\n
First, use the rowconfigure()<\/code> and  columnconfigure()<\/code> methods to set up a grid of 3 rows 2 columns:<\/p>\n\n\n
root.rowconfigure(0<\/span>, weight=1<\/span>)\nroot.rowconfigure(1<\/span>, weight=1<\/span>)\nroot.rowconfigure(2<\/span>, weight=1<\/span>)\nroot.columnconfigure(0<\/span>, weight=1<\/span>)\nroot.columnconfigure(1<\/span>, weight=3<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Second, position the username label on the first column and the username entry on the second column of the first row of the grid:<\/p>\n\n\n
username_label = ttk.Label(root, text=\"Username:\"<\/span>)\nusername_label.grid(column=0<\/span>, row=0<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\nusername_entry = ttk.Entry(root)\nusername_entry.grid(column=1<\/span>, row=0<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Third, position the password label and entry on the first and second column of the second row:<\/p>\n\n\n
password_label = ttk.Label(root, text=\"Password:\"<\/span>)\npassword_label.grid(column=0<\/span>, row=1<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)\n\npassword_entry = ttk.Entry(root,  show=\"*\"<\/span>)\npassword_entry.grid(column=1<\/span>, row=1<\/span>, sticky=tk.EW, padx=5<\/span>, pady=5<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Finally, position the login button on the third row. Since its sticky<\/code> option sets to E<\/code>, the button is aligned to the right of the third row.<\/p>\n\n\n
login_button = ttk.Button(root, text=\"Login\"<\/span>)\nlogin_button.grid(column=1<\/span>, row=3<\/span>, sticky=tk.E, padx=5<\/span>, pady=5<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
Summary #<\/a><\/h2>\n\n\n\n
    \n
  • Use the columnconfigure()<\/code> and rowconfigure()<\/code> methods to specify the weight of a column and a row of a grid.<\/li>\n\n\n\n
  • Use grid()<\/code> method to position a widget on a grid.<\/li>\n\n\n\n
  • Use sticky<\/code> option to align the position of the widget on a cell and define how the widget will be stretched.<\/li>\n\n\n\n
  • Use ipadx<\/code>, ipady<\/code> and padx<\/code>, pady<\/code> to add internal and external paddings.<\/li>\n<\/ul>\n
    \n\t
    \n\t\t
    Was this tutorial helpful ?<\/div>\n\t\t
    \n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t Yes <\/span>\n\t\t\t<\/button>\n\n\t\t\t\n\t\t\t\t\n\t\t\t\t\t<\/path>\n\t\t\t\t<\/svg>\n\t\t\t\t No <\/span>\n\t\t\t<\/button>\n\t\t<\/div>\n\t<\/header>\n\n\t
    \n\t\t
    \n\t\t\t
    <\/div>\n\t\t\t