【Python】複数行ボタン配置の不具合？【tkinter】

Question

前提・実現したいこと

tkinterでGUIの開発をしています。
9つのボタンを等間隔に配置した行を複数作りたいのですが、なぜか2列目から添付画像のように配置が崩れてしまいます。

エラーメッセージは出ていません。

1行目では成功しているため、2行目から配置が崩れる理由がよく分かりません。
どなたか詳しい方、対処法を教えていただきたいです。よろしくお願いします。

該当のソースコード

import tkinter as tk
import tkinter.ttk as ttk

root = tk.Tk()
pad = {"padx" : 5, "pady" : 5}
we = tk.W + tk.E
w = tk.W


# フレーム配置
fra0 = tk.Frame(root, cnf=pad, height=10)
fra0.pack(expand=True, fill="x", padx=10)
fra0.columnconfigure([1, 3, 5], weight=1)
fra0.rowconfigure([0, 1, 2], weight=1)
fra0.pack_propagate(0)

fra = tk.Frame(root, cnf=pad, height=10)
fra.pack(expand=True, fill="x", padx=10)
fra.columnconfigure([1, 3, 5], weight=1)
fra.rowconfigure([0, 1, 2], weight=1)
fra.pack_propagate(0)

fra_2 = tk.Frame(root, cnf=pad, height=10)
fra_2.pack(expand=True, fill="x", padx=10)
fra_2.columnconfigure([1, 3, 5], weight=1)
fra_2.rowconfigure([0, 1, 2], weight=1)
fra_2.pack_propagate(0)

fra_3 = tk.Frame(root, cnf=pad, height=10)
fra_3.pack(expand=True, fill="x", padx=10)
fra_3.columnconfigure([1, 3, 5], weight=1)
fra_3.rowconfigure([0, 1, 2], weight=1)
fra_3.pack_propagate(0)

fra2 = tk.Frame(root, cnf=pad, height=10)
fra2.pack(expand=True, fill="x", padx=10)
fra2.columnconfigure([1, 3, 5], weight=1)
fra2.rowconfigure([0, 1, 2], weight=1)
fra2.pack_propagete(0)


StyCol = []
Col = []
Com = []
Btn = []

for i in range(18):
 Col.append("red")
 StyCol.append("ReColor.TButton")

l = len(Col)
print("l = " + str(l))

# ラベル配置
lbl1 = tk.Label(fra0, text="基本色：")
lbl1.grid(row=0, column=0)


lbl2_void = tk.Label(fra2, text="")
lbl2_void.grid(row=0, column=0)
lbl2 = tk.Label(fra2, text="作成した色：")
lbl2.grid(row=1, column=0)


# ボタン配置
for n in range(l):
 print(Col[n])
 style = ttk.Style()
 style.theme_use("default")
 style.configure("%s" % StyCol[n], font=("", "", ""), background="%s" % Col[n], foreground="white", borderwidth=3, relief="groove", bordercolor="gray94")
 style.map("%s" % StyCol[n], background=[("pressed", "!disabled", "%s" % Col[n]), ("active", "%s" % Col[n])], foreground=[("pressed", "white"), ("active", "white")])
 style.layout("%s" % StyCol[n],
  [('TButton.border', {'sticky': 'nswe', 'border': '1', 'children': [
   #('Button.focus', {'sticky': 'nswe', 'children': [
   ('Button.padding', {'sticky': 'nswe', 'children': [
   ('Button.label', {'sticky': 'nswe'})]})
   ]})
  #]})
  ])
 if 0 <= n <= 8:
  btn = ttk.Button(fra, text="", style="%s" % StyCol[n])
  btn.grid(row=0, column=n, cnf=pad, sticky=w, ipadx=7, ipady=7)
  Btn.append(btn)
 elif 9 <= n <= 16:
  btn = ttk.Button(fra_2, text="", style="%s" % StyCol[n])
  btn.grid(row=1, column=n-9, cnf=pad, sticky=w, ipadx=7, ipady=7)
  Btn.append(btn)
 elif 17 <= n <= 24:
  btn = ttk.Button(fra_3, text="", style="%s" % StyCol[n])
  btn.grid(row=2, column=n-17, cnf=pad, sticky=w, ipadx=7, ipady=7)


root.mainloop()

補足情報（FW/ツールのバージョンなど）

Windows10
Python 3.8.3
tkinter 8.6.10

Answer 1

とりあえず指折りで数えてみればわかると思いますが、
9≦16は要素が9ではなく8です。

    if 0 <= n <= 8:
        btn = ttk.Button(fra, text="", style="%s" % StyCol[n])
        btn.grid(row=0, column=n, cnf=pad, sticky=w, ipadx=7, ipady=7)
        Btn.append(btn)
    elif 9 <= n <= 17:
        btn = ttk.Button(fra_2, text="", style="%s" % StyCol[n])
        btn.grid(row=1, column=n-9, cnf=pad, sticky=w, ipadx=7, ipady=7)
        Btn.append(btn)
    elif 18 <= n <= 26:
        btn = ttk.Button(fra_3, text="", style="%s" % StyCol[n])
        btn.grid(row=2, column=n-17, cnf=pad, sticky=w, ipadx=7, ipady=7)

こうすれば各列の要素が9で統一されます。

Comments

[netz-eng]

あっ……ご回答ありがとうございます。
単なる数え間違いとは、お恥ずかしい限りです。

いま気づきましたが、同一フレーム内で行を変えれば済む話でしたね。
お手数をおかけしました！　ありがとうございます。