Kiril Kiril - 4 months ago 31
Python Question

How to create a self resizing grid of buttons in tkinter?

I am trying to create a grid of buttons(in order to achieve the clickable cell effect) with Tkinter.

My main problem is that I cannot make the

grid
and the buttons autoresize and fit the parent window.

For example, when I have a high number of buttons on the grid, instead of shrinking the buttons so that the grid fits inside the window, I get a stretched frame that goes off screen.

The effect that I am looking for is the grid filling all available space, then resizing its cells to fit within that space. I have read at the documentation, but I still cannot figure out how to make it work.

This is the basic code which is my starting point:

def __init__(self):
root = Tk()
frame = Frame(root)
frame.grid()

#some widgets get added in the first 6 rows of the frame's grid

#initialize grid
grid = Frame(frame)
grid.grid(sticky=N+S+E+W, column=0, row=7, columnspan=2)

#example values
for x in range(60):
for y in range(30):
btn = Button(grid)
btn.grid(column=x, row=y)

root.mainloop()

Answer

You need to configure the rows and columns to have a non-zero weight so that they will take up the extra space:

for x in range(60):
    Grid.columnconfigure(grid, x, weight=1)

for y in range(30):
    Grid.rowconfigure(grid, y, weight=1)

You also need to configure your buttons so that they will expand to fill the cell:

btn.grid(column=x, row=y, sticky=N+S+E+W)

This has to be done all the way up, so here is a full example:

from tkinter import *

root = Tk()
frame=Frame(root)
Grid.rowconfigure(root, 0, weight=1)
Grid.columnconfigure(root, 0, weight=1)
frame.grid(row=0, column=0, sticky=N+S+E+W)
grid=Frame(frame)
grid.grid(sticky=N+S+E+W, column=0, row=7, columnspan=2)
Grid.rowconfigure(frame, 7, weight=1)
Grid.columnconfigure(frame, 0, weight=1)

#example values
for x in range(10):
    for y in range(5):
        btn = Button(frame)
        btn.grid(column=x, row=y, sticky=N+S+E+W)

for x in range(10):
  Grid.columnconfigure(frame, x, weight=1)

for y in range(5):
  Grid.rowconfigure(frame, y, weight=1)

root.mainloop()