python-3.xtkinterlayoutalignment

How to scale buttons without misaligning them or fix the alignment?

I've been trying to learn how to use python and Tkinter. When I have multiple columns of buttons with different sizes they don't align as I would expect them to based on the size I've made them.

What it looks like:

1

As you can see the button with the height set to 100 only uses the same space as 6 of the buttons with height 10 as opposed to taking up the full height as expected.

Intended result:

2

Is there any way to align the buttons as intended without having to manually try and figure out the size necessary to alight them?

Code:

import tkinter as tk
import tkinter.font as tkFont

root = tk.Tk()
pixelVirtual = tk.PhotoImage(width=1, height=1)

large = tk.Button(root,
    text='Height=100',
    image=pixelVirtual,
    width=100,
    height=100,
    compound='c')
for i in range(10):
    small = tk.Button(root,
        text='Height=10',
        image=pixelVirtual,
        width=100,
        height=10,
        compound='c')
    small.grid(row=i, column= 1)
large.grid(row=0, rowspan=10, column=0)

root.mainloop()
Solution

  • It is because the final height of the small button is not 10. It is 18 in my system:

    So total is 4 + 2 + 2 + 10 = 18

    Similar for the large button: 4 + 2 + 2 + 100 = 108 which is 6 x 18.

    In order to align the large button, add sticky='nsew' in grid(...):

    large.grid(row=0, rowspan=10, column=0, sticky='nsew')