What does 'weight' do in tkinter?

Question

I've been searching different websites trying to find out what weight does in tkinter. I got this from TkDocs:

Every column and row has a "weight" grid option associated with it, which tells it how much it should grow if there is extra room in the master to fill. By default, the weight of each column or row is 0, meaning don't expand to fill space.

Could someone please put this into some context for me, as I'm struggling to understand what it does. I've experimented with the following code, and it just seems to move things across the page as I change the values.

try:
    import tkinter
except ImportError:  # python 2
    import Tkinter as tkinter

import os

mainWindow = tkinter.Tk()

mainWindow.title("Grid demo")
mainWindow.geometry('640x480-8-200')

label = tkinter.Label(mainWindow, text="tkinter grid demo")
label.grid(row=0, column=0, columnspan=3)

mainWindow.columnconfigure(0, weight=1)
mainWindow.columnconfigure(1, weight=1)
mainWindow.columnconfigure(2, weight=3)
mainWindow.columnconfigure(3, weight=3)
mainWindow.columnconfigure(4, weight=3)
mainWindow.rowconfigure(0, weight=1)
mainWindow.rowconfigure(1, weight=10)
mainWindow.rowconfigure(2, weight=1)
mainWindow.rowconfigure(3, weight=3)
mainWindow.rowconfigure(4, weight=3)

fileList = tkinter.Listbox(mainWindow)
fileList.grid(row=1, column=0, sticky='nsew', rowspan=2)
fileList.config(border=2, relief='sunken')

for zone in os.listdir('/Windows/System32'):
    fileList.insert(tkinter.END, zone)
mainWindow.mainloop()

Answer 1

In the simplest terms possible, a non-zero weight causes a row or column to grow if there's extra space. The default is a weight of zero, which means the column will not grow if there's extra space.

Consider the following code, which creates a window larger than the widgets that are inside, and for which no columns have weight:

import tkinter as tk

root = tk.Tk()
root.geometry("200x100")

f1 = tk.Frame(root, background="bisque", width=10, height=100)
f2 = tk.Frame(root, background="pink", width=10, height=100)

f1.grid(row=0, column=0, sticky="nsew")
f2.grid(row=0, column=1, sticky="nsew")

root.grid_columnconfigure(0, weight=0)
root.grid_columnconfigure(1, weight=0)

root.mainloop()

Note: columnconfigure is an alias for grid_columnconfigure. I used the longer form here because I think it is more clear.

This is what the window looks like:

The reason it looks that way is because tkinter has been told not to give any of the columns any extra space, so the extra space goes unused to the right.

Now, change the code so that we give a weight to just one column:

root.grid_columnconfigure(0, weight=1)

When we restart, we now have a window that looks like this:

What happened? Because column zero had a weight of one, tkinter gave the extra space to this column. You could have set the weight to 1, 100, 100000 and you would get the same result. In this case, all of the extra space goes to this one column.

What happens if you give both columns a weight? The extra space is divided between the columns proportional to their weight. For example, let's say you want a navigation area on the left that takes up 1/4 of the screen and the main area should take up 3/4 of the screen (a 1:3 ratio).

Let's change the weights to look like this:

root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=3)

Since both columns have weight, extra space is given to both columns. For every four pixels of extra space, column 0 will get 1 and column 1 will get the other 3.

What's more, if you interactively resize the window, the proportion is preserved as much as possible. Here's the same window that I manually resized to be much wider: