Let's first become aware of the subtle details that are going on in our GUI layout in order to understand it better.

We are using the grid layout manager widget, and it lays out our widgets in a zero-based grid. This is very similar to an Excel spreadsheet or a database table.

The following is an example of a grid layout manager with two rows and three columns:

Using the grid layout manager, what happens is that the width of any given column is determined by the longest name or widget in that column. This affects all the rows.

By adding our LabelFrame widget and giving it a title that is longer than some hardcoded size widget, such as the top-left label and the text entry below it, we dynamically move those widgets to the center of column 0, adding space on the left- and right-hand side of those widgets.

Incidentally, because we used the sticky property for the Checkbutton and ScrolledText widgets, those remain attached to the left-hand side of the frame.

Let's look in more detail at the screenshot from the first recipe of this chapter, Arranging several labels within a label frame widget:

We added the following code to create LabelFrame and then placed labels into this frame:

Since the text property of the LabelFrame, which is displayed as the title of the LabelFrame, is longer than both our Enter a name: label and the textbox entry below it, those two widgets are dynamically centered within the new width of column 0.

The Checkbutton and Radiobutton widgets in column 0 did not get centered because we used the sticky=tk.W property when we created those widgets.

For the ScrolledText widget, we used sticky=tk.WE, which binds the widget to both the west (aka left) and east (aka right) side of the frame.

Let's remove the sticky property from the ScrolledText widget and observe the effect this change has:

Now, our GUI has new space around the ScrolledText widget, both on the left- and right-hand sides. Because we used the columnspan=3 property, our ScrolledText widget still spans all three columns:

If we remove columnspan=3, we'll get the following GUI, which is not what we want. Now, our ScrolledText only occupies column 0 and, because of its size, stretches the layout:

GUI_remove_columnspan.py

One way to get our layout back to where we were before adding LabelFrame is to adjust the grid column position. Change the column value from 0 to 1:

Now our GUI looks as follows: