Using Place and Grid

00:00 The place and grid Geometry Managers. You can use .place() to control the precise location that a widget should occupy in a window or frame.

00:10 You need to provide two keyword arguments, x and y, which specify the x and y coordinates for the top left corner of the widget.

00:18 Both x and y are measured in pixels, not text units. Keep in mind that the origin where x and y are both zero is the top left corner of the frame or window.

00:29 So you can think of the y argument of .place() as the number of pixels from the top of the window and the x argument as the number of pixels from the left edge of the window. On screen, you can see an example of .place() in action.

00:44 These lines create a new Frame widget called Frame measuring 150 pixels wide and 150 pixels tall, and then pack it into the window with pack().

00:55 Next, you create a new Label called label1 with a red background and place it in the frame at position zero zero.

01:06 These two lines create a second Label called label2 with a yellow background and place it in frame one at position 55 75.

01:24 On screen you can see the window that the code produces.

01:29 Note that if you run this code on a different operating system that uses different font sizes and styles, then the second label might become partially obscured by the windows edge.

01:39 That’s why .place() isn’t used often. In addition, it has two main drawbacks. Layout can be difficult to manage with .place(). This is particularly true if your application has lots of widgets.

01:51 Layouts created with .place() aren’t responsive. They don’t change as the window is resized. One of the main challenges of cross-platform GUI development is making layouts that look good no matter on which platform they’re viewed on.

02:04 And .place() is a poor choice for making responsive and cross-platform layouts. But that’s not to say you should never use it. In some cases, it might be just what you need.

02:15 For example, if you’re creating a GUI interface for a map, then .place() might be the perfect choice to ensure widgets are placed at exactly the correct distance from each other in the map. .pack() is usually a better choice than .place(), but even .pack() has some downsides.

02:30 The placement of widgets depends on the order in which .pack() is called, so it can be difficult to modify existing applications without fully understanding the code controlling the layout.

02:40 The .grid() geometry manager solves a lot of these issues. The geometry manager you’ll likely use most often is .grid(), which provides all the power of .pack() in a format that’s easier to understand and maintain.

02:53 .grid() works by splitting a window or frame into rows and columns. You specify the location of a widget by calling .grid() and passing the row and column indices to the row and column keyword arguments respectively.

03:06 Both row and column indices start at zero, so a row index of one and a column index of two tells .grid() to place a widget in the third column of the second row. On screen, you’ll see a script which creates a three by three grid of frames with label widgets packed into them.

03:38 You’re using two geometry managers in this example. Each frame is attached to a window with a .grid() geometry manager. Each label is attached to its master frame with .pack().

03:52 The important thing to realize here is even though .grid() is called on each frame object, the geometry manager applies to the window object.

04:00 Similarly, the layout of each frame is controlled with the .pack() geometry manager.

04:07 Here you can see the resulting window.

04:12 The frames in the previous example are placed tightly next to one another. To add some space around each frame, you can set the padding of each cell in the .grid().

04:22 Padding is just some blank space that surrounds a widget and visually sets its content apart. External padding adds some space around the outside of a .grid() cell and it’s controlled with two keyword arguments to .grid().

04:35 padx adds padding in the horizontal direction and pady adds padding in the vertical direction. Both of these are measured in pixels and not text units, so setting them both to the same value will create the same amount of padding in both directions.

04:51 Try adding some padding outside the frames from the previous example.

05:02 Here you can see the resulting window.

05:07 .pack() also has padx and pady parameters. Here you’ll add five pixels of additional padding around each label in both the x and y directions.

05:22 The extra padding around the Label widgets gives each cell in the grid a little bit of breathing room between the frame border and the text in the label.

05:31 That looks good, but if you try to expand the window in any direction, you’ll notice the layout isn’t responsive. The whole grid stays at the top left corner as the window expands, and this is generally not desirable.

05:44 So in the next section of the course, you’ll take a look at how to handle window resizing.