tkinter gap difference between widgets using columspan

Question

I have been doing a course on udemy and trying to learn python. I was doing everything as i saw at the tutorial but for some reason it didn't really go well as i expected. Even though I use the columspan and the widht correctly, the widgets are not placed as I wanted them to be.

So far how the UI looks like

This is how it should look like

from tkinter import *

window = Tk()
window.title("Password Manager")
window.config(padx=20, pady=20)

canvas = Canvas(width=200, height=200)
img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=img)
canvas.grid(column=1, row=0)

web_label = Label(text="Website:")
web_label.grid(column=0, row=1)

web_entr = Entry(width=35)
web_entr.grid(column=1, row=1, columnspan=2)

email_label = Label(text="Email/Username:")
email_label.grid(column=0, row=2)

email_entr = Entry(width=35)
email_entr.grid(column=1, row=2, columnspan=2)

pass_label = Label(text="Password:")
pass_label.grid(column=0, row=3)

pas_entr = Entry(width=21)
pas_entr.grid(column=1, row=3, columnspan=2)

pas_generator = Button(text="Generate Password", width=14)
pas_generator.grid(row=3, column=3)


add_button = Button(text="Add", width=36)
add_button.grid(column=1, row=4, columnspan=2)

window.mainloop()

and this is how I arranged everything.

I tried to use padx and sticky keywords to see if that might help but there was no difference. I used padx as a tupple in grid (0, 10) and (0, 0).

Other than that I tried to play with the width values and the columnspan you can see in the code but there was again no difference.

Answer 1

Basically your form design has 3 columns, so

• the logo should be put at column 0 with columnspan=3
• password entry should have columnspan=1
• the "Generate Password" button should be put at column 2

In order to align those entries and buttons, it is better to add sticky="ew" in .grid(...) on those entries and buttons

from tkinter import *

window = Tk()
window.title("Password Manager")
window.config(padx=20, pady=20)

canvas = Canvas(width=200, height=200)
img = PhotoImage(file="logo.png")
canvas.create_image(100, 100, image=img)
canvas.grid(column=0, row=0, columnspan=3) # put at column 0 with columnspan=3

web_label = Label(text="Website:")
web_label.grid(column=0, row=1)

web_entr = Entry(width=35)
web_entr.grid(column=1, row=1, columnspan=2, sticky="ew")

email_label = Label(text="Email/Username:")
email_label.grid(column=0, row=2)

email_entr = Entry(width=35)
email_entr.grid(column=1, row=2, columnspan=2, sticky="ew")

pass_label = Label(text="Password:")
pass_label.grid(column=0, row=3)

pas_entr = Entry(width=21)
pas_entr.grid(column=1, row=3, sticky="ew") # removed columnspan=2

pas_generator = Button(text="Generate Password", width=14)
pas_generator.grid(row=3, column=2, sticky="ew") # put at column 2

add_button = Button(text="Add", width=36)
add_button.grid(column=1, row=4, columnspan=2, sticky="ew")

window.mainloop()

Result: