{"id":5148,"date":"2020-04-24T17:03:09","date_gmt":"2020-04-24T17:03:09","guid":{"rendered":"https:\/\/www.askpython.com\/?p=5148"},"modified":"2020-04-24T17:03:11","modified_gmt":"2020-04-24T17:03:11","slug":"python-tkinter-grid-example","status":"publish","type":"post","link":"https:\/\/www.askpython.com\/python-modules\/tkinter\/python-tkinter-grid-example","title":{"rendered":"Python – Tkinter Grid Example"},"content":{"rendered":"\n

Hello everyone! In our previous tutorial section on Tkinter, we covered the Tkinter text widget<\/a>. Let’s now look at an example of using the Tkinter Grid manager.<\/p>\n\n\n\n

But, you may have a question to ask, especially after seeing a lot of people using the pack<\/code> manager.<\/p>\n\n\n\n

\n\n\n\n

Why use Tkinter Grid Manager?<\/h2>\n\n\n\n

In our previous tutorials, we had been using the pack <\/strong>geometry manager to manage the geometry of our application. But making it work smoothly with a lot of objects is a difficult task.<\/p>\n\n\n\n

Therefore, Tkinter introduced other packing managers to make our life a bit easier, and also have some flexibility on when to use what.<\/p>\n\n\n\n

The Tkinter Grid manager is actually the easiest to learn and is the most recommended if you’re starting out on building Tkinter applications.<\/p>\n\n\n\n

Now that we have this covered, let’s move on to actually using the Grid manager in our application!<\/p>\n\n\n\n

NOTE<\/strong>: Never use multiple packing managers in the same Tkinter application. This will cause unintended bugs, and is not recommended at all. Use only one packing manager for a single application.<\/p>\n\n\n\n

Using the Tkinter Grid Geometry Manager<\/h2>\n\n\n\n

Let’s design the below layout using the Grid manager.<\/p>\n\n\n\n

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

This layout will have two entry widgets<\/a>, with a label for each, and a button widget below.<\/p>\n\n\n\n

We will also add an image to the right, and a button widget for the image too.<\/p>\n\n\n\n

While this type of layout is hard to manage using pack<\/code>, we can easily make this using grid<\/code>!<\/p>\n\n\n\n

The steps are simple enough. We just need to create all the widgets we need, and tell the grid<\/code> manager how to place them.<\/p>\n\n\n\n

We’ll first create our master object.<\/p>\n\n\n

\nimport tkinter as tk\n\nmaster = tk.Tk()\n<\/pre><\/div>\n\n\n
Now, let’s create two labels first, since we need them on the left most side, and tell the grid<\/code> manager to place it on the respective row number.<\/p>\n\n\n\n
We need the labels at column number 0, indexed by row numbers 0 and 1. After creating the labels, we can directly pack them using grid<\/code> by using:<\/p>\n\n\n
\nlabel_object.grid(row, col)\n<\/pre><\/div>\n\n\n
So, we can directly write it as follows:<\/p>\n\n\n
\ntk.Label(master, text="Label 1").grid(row=0, column=0)\ntk.Label(master, text="Label 2").grid(row=1, column=0)\n<\/pre><\/div>\n\n\n
Let’s now add an entry for each of the two labels.<\/p>\n\n\n
\ne1 = tk.Entry(master)\ne2 = tk.Entry(master)\n<\/pre><\/div>\n\n\n
We have created the entry objects, but now, we need to tell grid<\/code> to place them in their respective position.<\/p>\n\n\n\n
Simply call entry_obj.grid()<\/code>! This is similar to pack, but overall, is much more smoother to use.<\/p>\n\n\n
\ne1.grid(row=0, column=1)\ne2.grid(row=1, column=1)\n<\/pre><\/div>\n\n\n
After this, we can add our tkinter main-loop using tk.mainloop()<\/code>.<\/p>\n\n\n\n
I’ll post the complete code until this point.<\/p>\n\n\n
\nimport tkinter as tk\n\n# Create the master object\nmaster = tk.Tk()\n\n# Create the label objects and pack them using grid\ntk.Label(master, text="Label 1").grid(row=0, column=0)\ntk.Label(master, text="Label 2").grid(row=1, column=0)\n\n# Create the entry objects using master\ne1 = tk.Entry(master)\ne2 = tk.Entry(master)\n\n# Pack them using grid\ne1.grid(row=0, column=1)\ne2.grid(row=1, column=1)\n\n# The mainloop\ntk.mainloop()\n\n<\/pre><\/div>\n\n\n
Output<\/strong><\/p>\n\n\n\n
\"Tkinter
Tkinter Grid Sample<\/figcaption><\/figure><\/div>\n\n\n\n
Alright! This seems to work as expected. Now, let’s add a button to it, right below!<\/p>\n\n\n
\nbutton1 = tk.Button(master, text="Button 1")\nbutton1.grid(columnspan=2, row=2, column=0)\n<\/pre><\/div>\n\n\n
Now, we have our left side covered.<\/p>\n\n\n\n
Let’s add the image and another button to the right side.<\/p>\n\n\n\n
As we discussed the issues of displaying an image on our previous tutorial<\/a>, we must hold a reference to the PhotoImage <\/strong>object to avoid automatic garbage collection!<\/p>\n\n\n
\nfrom PIL import Image, ImageTk\n\n# Create the PIL image object\nimage = Image.open("debian.png")\nphoto = ImageTk.PhotoImage(image)\n\n# Create an image label\nimg_label = tk.Label(image=photo)\n# Store a reference to a PhotoImage object, to avoid it\n# being garbage collected! This is necesary to display the image!\nimg_label.image = photo\n\nimg_label.grid(row=0, column=2)\n<\/pre><\/div>\n\n\n
Finally, let’s add a button at the bottom.<\/p>\n\n\n
\n# Create another button\nbutton2 = tk.Button(master, text="Button 2")\nbutton2.grid(columnspan=2, row=2, column=2)\n<\/pre><\/div>\n\n\n
Now, I’ll post the complete program here.<\/p>\n\n\n
\nimport tkinter as tk\nfrom PIL import Image, ImageTk\n\n# Create the master object\nmaster = tk.Tk()\n\n# Create the label objects and pack them using grid\ntk.Label(master, text="Label 1").grid(row=0, column=0)\ntk.Label(master, text="Label 2").grid(row=1, column=0)\n\n# Create the entry objects using master\ne1 = tk.Entry(master)\ne2 = tk.Entry(master)\n\n# Pack them using grid\ne1.grid(row=0, column=1)\ne2.grid(row=1, column=1)\n\nbutton1 = tk.Button(master, text="Button 1")\nbutton1.grid(columnspan=2, row=2, column=0)\n\n# Create the PIL image object\nimage = Image.open("debian.png")\nphoto = ImageTk.PhotoImage(image)\n\n# Create an image label\nimg_label = tk.Label(image=photo)\n# Store a reference to a PhotoImage object, to avoid it\n# being garbage collected! This is necesary to display the image!\nimg_label.image = photo\n\nimg_label.grid(row=0, column=2)\n\n# Create another button\nbutton2 = tk.Button(master, text="Button 2")\nbutton2.grid(columnspan=2, row=2, column=2)\n\n# The mainloop\ntk.mainloop()\n<\/pre><\/div>\n\n\n
Output<\/strong><\/p>\n\n\n\n
\"Tkinter
Tkinter Grid Complete Layout<\/figcaption><\/figure><\/div>\n\n\n\n
Finally, we’ve completed our layout! And it was as simple as just creating the widgets and telling grid<\/code> to place them in their correct positions!<\/p>\n\n\n\n
\n\n\n\n
Conclusion<\/h2>\n\n\n\n
In this tutorial, we learned how we could add widgets to our Tkinter application and design layouts using the Tkinter Grid Geometry Manager.<\/p>\n\n\n\n
Stay tuned for more Tkinter content!<\/p>\n\n\n\n
\n","protected":false},"excerpt":{"rendered":"
Hello everyone! In our previous tutorial section on Tkinter, we covered the Tkinter text widget. Let’s now look at an example of using the Tkinter Grid manager. But, you may have a question to ask, especially after seeing a lot of people using the pack manager. Why use Tkinter Grid Manager? In our previous tutorials, […]<\/p>\n","protected":false},"author":7,"featured_media":5158,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[92],"tags":[],"class_list":["post-5148","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tkinter"],"blocksy_meta":[],"_links":{"self":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/5148","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/comments?post=5148"}],"version-history":[{"count":0,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/posts\/5148\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media\/5158"}],"wp:attachment":[{"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/media?parent=5148"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/categories?post=5148"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.askpython.com\/wp-json\/wp\/v2\/tags?post=5148"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}