computer with Red Huli logo, Python logo, plans for future blogs about Tkinter
Working on the plans of how to make UIs using Tkinter and Python.

Ever wanted to build a UI with Tkinter and Python? Have you ever wondered when you should use pack, place or grid in Tkinter? Or thought, “Which layout manager would make my UI easier to code?” How about, “Which manager would make my UI look better?” Well, today I got you covered with this tutorial!

This time we will discuss the three types of layout managers in Tkinter – pack, place, and grid. Selecting the right layout manager in your project is useful for making it easier to organize the widgets in your GUI. We won’t go over all of the details for each manager. If you already know which layout manager you want to use, check out these other posts I have written that cover each manager separately – pack, place, grid.

Previously, I created the framework for a photo editor in Tkinter. Today, we are going to take a look at how we can recreate that same photo editor using the different layout managers, and see how they affect the look of our GUI. I have also update the photo editor to include Button widgets. (Find out more about Buttons.)

By the end of this tutorial, you will have a fundamental understanding of how to use the different layout managers in Tkinter, and be able to compare them to decide which is better in your own projects.


photo editor GUI using grid, rough layout
Photo editor created previously using the grid layout manager in Tkinter.

Keep in Mind When Designing the User Interface

Let’s take a brief moment to think about what designing a good UI means. Obviously from the coding side, you want to be able write concise and well-organized code. But when designing UI, it also important to consider your intended user. Users should be able to flow around the window you create intuitively, without having to search everywhere for a certain button in a sea of other widgets. We have all become accustomed to seeing and using good (and bad) UI everyday on our phones or when surfing the web. If you are still not sure, doing a quick Google search of bad UI vs. good UI will turn up loads of examples to help you.

When you use the layout managers in Tkinter – grid, place, or pack – think about how simple or complex of a UI you need to design. There are certain situations where using one manager might make your window appear easier to understand, look better, or even make coding the UI simpler.


Grid Layout Manager

The grid method organizes widgets in a 2-dimensional table-like structure (think of an Excel spreadsheet), where each cell can hold a widget. You don’t have to specify the size of the widgets in your window as the manager already handles that for you.

Placing widgets in the window is as simple as specifying the row and column values. The top left corner has values row=0 and column=0, and increase by 1 as you move right or down in the grid. If you want more control over arranging widgets or resizing them, it is also possible to span across multiple rows. However, I found that when one widget spans across multiple rows or columns and another widget does not, the manager has to adjust for this difference.

Below are a few of the parameters for grid that we will be using in this tutorial.

  • row, column – the row and column values for the location of the widget. Both start from 0.
  • padx, pady – the number of pixels surrounding the widget to create a padding between other widgets, for horizontal or vertical padding.
  • ipadx, ipady – how many pixels to use for padding inside the widget, also for horizontal or vertical padding.
  • sticky – specify a value of s, n, e, w, or a combination of them, e.g. nw, ne, sw, or se. The parameter tells which side of the ‘cell’ the widget will ‘stick’ to . If you use ‘w’+’e’+’n’+’s’, then the widget will fill up the ‘cell’. Default is to center the widget within the ‘cell’.

Using Grid

Below is the code for the photo editor using Tkinter and the grid layout manager.

In line 3, import the Tkinter module and all of its functions. We create the root window, give the window a title, specify the max size it can expand to, and choose a background color in lines 5 – 8. The left and right frames that are used to hold our photo editing tools and image are created in lines 11 – 15. Check out our post for more details about how to create Frame widgets or how to place Frames inside of other Frames. In line 12, we call the left_frame and use the grid method to arrange the widget in the window. The row and column values are set to 0 and 0, placing the frame in the top left corner. Then we use padx and pady to create some padding between the root window and the left_frame. This creates a much nicer appearance.

After that, we do something similar for the right_frame, but change the column value to 1 to place the right_frame next to the left_frame. We use a similar process for other widgets. For the buttons in lines 37 – 41, set the sticky parameter to ‘w’+’e’+’n’+’s’ to stretch the buttons within their respective frames.

updated photo editor GUI using grid, includes buttons
Updated photo editor created using the grid layout manager.

Verdict: I found grid is great for both general projects, and even complex ones. With grid, you can create less frames and organize widgets much more easily. One thing to note, if a widget you want to use spans over a number of rows or columns, it will affect nearby widgets’ locations relative to that widget.


Pack Layout Manager

The pack method is much simpler to use for organizing widgets, especially if you simply want Tkinter to figure out exactly where the widget in your GUI should be. Knowing the general location of a widget in the main window relative to its surrounding widgets is generally enough.

Widgets are organized into blocks and placed into the parent window depending upon specified parameters. But unlike grid, you don’t need to specify the row and column values. Widgets can be placed vertically or horizontally depending upon the values for the side parameter. For more complex layouts, combine pack with Frame widgets.

NOTE: Don’t mix grid and pack methods. The application will freeze trying to figure out how to make these two managers work together.

  • side – specify the general location of the widget in the window, arguments are top, bottom, left, right (default is top).
  • fill – which directions you want the widget to fill in the parent window, can choose x, y directions, or both.
  • padx, pady – the number of pixels surrounding the widget to create a padding between other widgets, for horizontal or vertical padding.
  • ipadx, ipady – how many pixels to use for padding inside the widget, also for horizontal or vertical padding
  • expand – set to True if you want the widget to stretch if the parent window expands. Default is False.
  • anchor – where the widget is placed in the parent widget, specified by n, s, e, w, or some combination of them. Default is center.

Using Pack

Let’s take a look at the code for the photo editor using the pack method. The entire code is given here for your reference.

Since we are just using different layout managers to see how they affect the look of our GUI, much of the code is similar. In lines 12 or 15, you can see we are placing the frames in the root window using pack.

One thing worth noting is, unlike the grid manager, we create two separate Frames to hold all of our Tools and Filters buttons. You can see this in lines 27 – 31.

updated photo editor GUI using pack, includes buttons
Photo editor created using the pack layout manager.

Verdict: I found pack better suited for simpler layouts, and more complicated for creating complex UIs. It feels a little bit limited compared to grid. However, it is a bit easier to use for simpler UIs as the algorithm helps you to arrange the widgets.


Place Layout Manager

The third layout manager, place, allows you to organize widgets by specifying both the position and size of each widget relative to other widgets. This method allows for a bit more control in designing your UI than pack or grid, if you are willing to play around with the various x and y values.

NOTE: Each of the three layout managers – place, pack, and grid – should never be used in conjunction with each other.

  • in_ – specify the master window for the widget.
  • x, y – specify the specific x and y values of the widget in the parent window.
  • relx, rely – horizontal and vertical offset relative to the size of the parent widget, values between 0.0 and 0.1.
  • relwidth, relheight – set height and width of widget relative to the size of the parent widget, values between 0.0 and 0.1.
  • anchor – where the widget is placed in the parent widget, specified by n, s, e, w, or some combination of them. Default is center.

Using Place

Below is the code for the photo editor using the place layout manager.

For this version of the photo editor, a similar method to pack was used. Two separate frames were created in lines 27 – 31 to hold all of the button widgets.

updated photo editor GUI using place, includes buttons
Photo editor created using the place layout manager.

Verdict: I found the concept of the place layout manager the simplest to understand, but also a little bit harder to use. Since I am able to specify the x and y values of the widget, it allows for more control. However, I also found it took more time for me to use place. First, I needed to consider the size of all the other widgets. Then, I had to think and plan their locations relative to other widgets. I began to make adjustments, but then other widgets began to overlap as I experimented with relx and rely.

Summary

In today’s tutorial, we saw how to create the same UI with Tkinter’s different layout managers. In addition, we took a look at how each method can affect the UI’s appearance, as well as the code.

Of course, there are further ways to improve the look of these UIs. In future tutorials, we will continue to do so. I definitely recommend experimenting with the different parameters of each layout manager. Find out which one can create the best functionality and usability for your projects.

Other Reading

Python Course – Good list of tutorials for learning the fundamentals of Tkinter.

Leave a Reply

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