tkinter useing grid on a frame doesn't seem to work

Question

Im trying to get a tkinter gui that lets the user sign in im really new to tkinter. I made a frame and when i use grid to put another frame widget inside of the frame it does it based off of the root and not the inner_frame thats what I think is happening. In the code I made a grey box to demonstrate and I dont understand why it is below the blue frame and not inside the yellow frame under the "sign in" text. Thanks for the help.

from tkinter import *
root = Tk()
root.title("sighn in test")

#colors
background = "#273E47"
accent = "#d8973c"
red = "#bb4430"
white = "#edf2f4"

#this creates and places the background frame
main_buttons_frame = Frame(root, height = 500, width = 400, bg = background).grid(row = 0, column = 0)
#this creates and places the inner frame
inner_frame = Frame(main_buttons_frame, height = 450, width = 300, bg = accent).grid(row = 0, column = 0)
#this creates and places the "sighn in text"
top_text = Label(inner_frame, text = "sign in", font = ("helvitica", 30, "bold"), bg = accent, fg =         
background).grid(row = 0, column = 0)
#this is a test to demonstrate
test_frame = Frame(inner_frame, bg = "grey", height = 100, width = 100).grid(row = 1, column = 0)


root.mainloop()

Answer 1

You have very common mistake of beginners

inner_frame = Frame(...).grid...()

It assigns None to inner_frame because grid() / pack() / place() gives None .

So later Frame(inner_frame, ..) means Frame(None, ..) and it adds to root

You have to do it in two steps

inner_frame = Frame(...)
inner_frame.grid(...)

And now you have Frame assigned to inner_frame

---

EDIT:

With correctly assigned widgets I get

and now gray box is inside yellow frame but image shows different problem - grid() / pack() automatically calculate position and size and external frame automatically change size to fit to child's size.

Using .grid_propagate(False) you can stop it

But it shows other problem - cells don't use full size of parent so yellow frame is moved to left top corner, not centered :) Empty cells have width = 0 and heigh = 0 so moving all to next row and next column will not change it - it will be still in left top corner :)

You need to assign weight to column and/or row which decide how to use free space. All columns/rows has weight=0 and when you set weight=1 then this row and/or column will use all free space - (this would need better explanation) - and then element inside cell will be centered.

 main_buttons_frame.grid_columnconfigure(0, weight=1)
 main_buttons_frame.grid_rowconfigure(0, weight=1)

---

import tkinter as tk # PEP8: `import *` is not preferred

# --- colors ---

background = "#273E47"
accent = "#d8973c"
red = "#bb4430"
white = "#edf2f4"

# --- main ---

root = tk.Tk()
root.title("sighn in test")

main_buttons_frame = tk.Frame(root, height=500, width=400, bg=background) # PEP8: without spaces around `=` inside `( )`
main_buttons_frame.grid(row=0, column=0)
#main_buttons_frame = None
main_buttons_frame.grid_propagate(False)
main_buttons_frame.grid_columnconfigure(0, weight=1)
main_buttons_frame.grid_rowconfigure(0, weight=1)

inner_frame = tk.Frame(main_buttons_frame, height=450, width=300, bg=accent)
inner_frame.grid(row=0, column=0)
#inner_frame = None
inner_frame.grid_propagate(False)
inner_frame.grid_columnconfigure(0, weight=1)
inner_frame.grid_rowconfigure(0, weight=1)

top_text = tk.Label(inner_frame, text="sign in", font=("helvitica", 30, "bold"), bg=accent, fg=background)
top_text.grid(row=0, column=0,)
#top_text = None
#top_text.grid_propagate(False)
#top_text.grid_columnconfigure(0, weight=1)
#top_text.grid_rowconfigure(0, weight=1)

test_frame = tk.Frame(inner_frame, bg="grey", height=100, width=100)
test_frame.grid(row=1, column=0)
#test_frame = None
#test_frame.grid_propagate(False)
#test_frame.grid_columnconfigure(1, weight=1)
#test_frame.grid_rowconfigure(0, weight=1)

root.mainloop()

---

BTW: PEP 8 -- Style Guide for Python Code