Tkinter - Center the frame in a row

Question

Hello I am struggling with tkinter grid_columnconfigure. I am creating window with 3 frame. I want to center second frame. I found grid_rowconfigure(0, weight=1) and grid_columnconfigure(0, weight=1). They are working but when I add third frame, my second frame shifting to the right.

Here's my code:

from tkinter import ttk
import tkinter as tk

root = tk.Tk()

root.geometry('600x400+500+250')
root.grid_rowconfigure(0, weight=1)
root.grid_columnconfigure(0, weight=1)

frame1 = tk.Frame(root, bg='red', width=50, height=50)
frame2 = tk.Frame(root, bg='green', width=50, height=50)
frame3 = tk.Frame(root, bg='blue', width=50, height=50)

frame1.grid(row=0, column=0, sticky='NW')
frame2.grid(row=1, column=1, sticky='S')
frame3.grid(row=0, column=2, sticky='NE')

tk.mainloop()

This is the result:

But I want this:

Thanks in advance

You've instructing `grid` to give all available extra space to the first column. Is that really what you want? If you give the extra space to the center column, the green box will be centered. The best solution depends on where you truly want the extra space to go. — Bryan Oakley, Oct 04 '22 at 19:10

bitRAKE · Accepted Answer · 2022-10-04T18:44:24.660

There are a lot of way to accomplish this, here is the simplest, imho:

from tkinter import ttk
import tkinter as tk

root = tk.Tk()

root.geometry('600x400+500+250')
root.grid_rowconfigure(0, weight=1)
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

frame1 = tk.Frame(root, bg='red', width=50, height=50)
frame2 = tk.Frame(root, bg='green', width=50, height=50)
frame3 = tk.Frame(root, bg='blue', width=50, height=50)

frame1.grid(row=0, column=0, sticky='NW')
frame2.grid(row=1, column=0, columnspan=2, sticky='S')
frame3.grid(row=0, column=1, sticky='NE')

tk.mainloop()

In your code, you are using three columns - which is still possible, but then a columnspan=3 would be needed for the green square.

Thank you for such a well explained question!

root.grid_rowconfigure(0, weight=1)
root.grid_rowconfigure(1, weight=1)
root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)
root.grid_columnconfigure(2, weight=1)

frame1 = tk.Frame(root, bg='red', width=50, height=50)
frame2 = tk.Frame(root, bg='green', width=50, height=50)
frame3 = tk.Frame(root, bg='blue', width=50, height=50)

frame1.grid(row=0, column=0, sticky='NW')
frame2.grid(row=1, column=0, columnspan=3, sticky='S')
frame3.grid(row=0, column=2, sticky='NE')

Is another solution for comparison.

Thanks, It worked but. I didn't get the point. What's the difference. Why do we have to do this? What stands for those ones and zeros? — Seminet, Oct 04 '22 at 18:28
The 0/1 are just the indices of the grid - I added a graphic. :) (0,0) would be the upper left, etc. — bitRAKE, Oct 04 '22 at 18:36

score 3 · Answer 2 · answered Oct 04 '22 at 19:54

The root of the problem is that you've configured the first column to take up all extra space. That forces the first column to push everything else to the right edge.

The simplest solution is to instead configure the second column to have a weight of 1. If you do that, the green frame will naturally be centered in the middle. This will cause all unallocated space to the middle. It's not clear if that's a problem or not.

#root.grid_columnconfigure(0, weight=1)
root.grid_columnconfigure(1, weight=1)

If you do indeed want the first column to have all of the extra space, the simplest solution is to put the green frame in the first column and have it span all three. By default, grid centers items in the space that has been allocated, so you don't need any extra configuration.

frame2.grid(row=1, column=0, columnspan=3, sticky='S')

Tkinter - Center the frame in a row

2 Answers2