Why does a frame not have an evenly distributed grid to the interface

Question

I want to navigate through different pages(frames) on my TKinter interface using buttons. First I need a grid that is evenly distributed over the interface so that I can place widgets accordingly on the frame.

To do this I wrote the following code:

import tkinter as tk
from tkinter import ttk

class App(tk.Tk):
    def __init__(self):
        super().__init__()
        
        # Create interface.
        self.geometry("600x300")
        self.title('login')
        self.resizable(0,0)

        # Create 5x5 grid for the interface.
        for cel in range(5):
            self.columnconfigure(cel, weight=1)
            self.rowconfigure(cel, weight=1)
        
        # Create a homepage frame.
        self.HomeFrame = ttk.Frame(self)
        self.HomeFrame.grid(column=0, row = 0, sticky='nswe')
        
        # Create 5x5 grid for the homepage frame.
        for cel in range(5):
            self.HomeFrame.columnconfigure(cel, weight=1)
            self.HomeFrame.rowconfigure(cel ,weight=1)
            
        # Create a label for each cel in the 5x5 HomeFrame Grid.
        # Change `self.HomeFrame` with `self` to see the grid of the interface
        for column in range(5):
            for row in range(5):
                self.rowlabel = ttk.Label(self, text=(str(column), str(row)))
                self.rowlabel.grid(column=column, row=row)
                
if __name__ == "__main__":
    app = App()
    app.mainloop()

Both grids are generated in the same way, but the result is different. I added numbers in each cel to show the difference.

This is what the grid looks like on my interface.

This is what the grid looks like on my frame

How do I generate the same grid for a frame?

Edit: Eventually I want to place buttons on the cells '01 - 04'. Then, I want to place a frame for each button on cel '1 0' that stretches out to '4 4' and changes to the corresponding button being clicked.

Since there is only one frame inside the main window and you have configured `weight=1` for 5 rows and columns, so the frame will not occupy all the space of the main window. Just configure `weight=1` for the first row and column only of the main window. — acw1668, Aug 14 '23 at 01:14
In the loop that generates the 5x5 grid for the interface(mainwindow) I hadded an if function. `if cel == 0: self.columnconfigure(cel, weight=1) self.rowconfigure(cel, weight=1)` This configures the first row and cell of the mainwindow with weight=1 only. But it still isn't working for me. Maybe I've misunderstood your answer — Robert, Aug 14 '23 at 01:25
You don't need the for loop. Just `self.rowconfigure(0, weight=1)` and `self.columnconfigure(0, weight=1)`. — acw1668, Aug 14 '23 at 01:28
Still can't get it to work. Any chance you could dumb it down for me and answer the question with a code block? — Robert, Aug 14 '23 at 02:15

score 1 · Answer 1 · answered Aug 14 '23 at 03:08

Since there is only one frame self.HomeFrame in the main window, you just need to set weight=1 for row 0 and column 0 to allocate all the space in the main window to the frame:

import tkinter as tk
from tkinter import ttk

class App(tk.Tk):
    def __init__(self):
        super().__init__()

        # Create interface.
        self.geometry("600x300")
        self.title('login')
        self.resizable(0, 0)

        self.columnconfigure(0, weight=1)
        self.rowconfigure(0, weight=1)

        # Create a homepage frame.
        self.HomeFrame = ttk.Frame(self)
        self.HomeFrame.grid(column=0, row=0, sticky='nswe')

        # Create 5x5 grid for the homepage frame.
        for cel in range(5):
            self.HomeFrame.columnconfigure(cel, weight=1)
            self.HomeFrame.rowconfigure(cel, weight=1)

        # Create a label for each cel in the 5x5 HomeFrame Grid.
        # Change `self.HomeFrame` with `self` to see the grid of the interface
        for column in range(5):
            for row in range(5):
                rowlabel = ttk.Label(self.HomeFrame, text=(str(column), str(row)))
                rowlabel.grid(column=column, row=row)

if __name__ == "__main__":
    app = App()
    app.mainloop()

Why does a frame not have an evenly distributed grid to the interface

1 Answers1