Python - ttkbootstrap widgets layout #3 grid

 A grid is the easiest way to place complex widget layouts. Like the Excel we commonly use, widgets can be placed using row and column numbers.

The following is a simple example of arranging a widget using two rows and two columns.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")

app.geometry("750x450")
frame = tb.Frame(app, bootstyle="primary", width=100, height=100)
frame.grid(column = 0, row = 0)
frame2 = tb.Frame(app, bootstyle="warning", width=100, height=100)
frame2.grid(column = 1, row = 0)
app.mainloop()

<basic_grid.py>

def grid(
    cnf: Mapping[str, Any] | None = {},
    *,
    column: int = ...,
    columnspan: int = ...,
    row: int = ...,
    rowspan: int = ...,
    ipadx: _ScreenUnits = ...,
    ipady: _ScreenUnits = ...,
    padx: _ScreenUnits | tuple[_ScreenUnits, _ScreenUnits] = ...,
    pady: _ScreenUnits | tuple[_ScreenUnits, _ScreenUnits] = ...,
    sticky: str = ...,
    in_: Misc = ...,
    **kw: Any
)

argument	usage	desc
column	column=no	row position
columnspan	columnspan=no	Merge columns
row	row=no	row position
rowspan	rowspan=no	Merge rows
ipadx	relheight=amount	Amount specifies how much horizontal internal padding to leave on each side of the content. Amount must be a valid screen distance, such as 2 or .5c. It defaults to 0. This value is mainly used in grid.
ipady	relwidth=amount	Amount specifies how much vertical internal padding to leave on each side of the content. Amount defaults to 0. This value is mainly used in grid.
padx	x=amount	Amount specifies how much horizontal external padding to leave on each side of the content. Amount may be a list of two values to specify padding for left and right separately. Amount defaults to 0.
pady	y=amount	Specifies which side of the container the content will be packed against. Must be left, right, top, or bottom. Defaults to top.

Example 1

<layout>

In order to fill the parent window, first call the columnconfigure and rowconfigure functions in the parent window and equally assign weights of 1 or more. And in the grid function of windget, specify the sticky value as east, west, north, south (news). Then, the widget expands in four directions and fills the entire grid regardless of the widget size. However, it does not become smaller than the widget size (100X100). Therefore, when using sticky='news', it is advantageous to make the widget small in size.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")

app.columnconfigure(0, weight=1)    #Weight : Relative scale for distributing extra space. Default value is 0 ( Not grow if there's extra space )
app.columnconfigure(1, weight=1)
app.rowconfigure(0, weight=1)

frame = tb.Frame(app, bootstyle="primary", width=100, height=100)
frame.grid(column = 0, row = 0, sticky='news')
frame2 = tb.Frame(app, bootstyle="warning", width=100, height=100)
frame2.grid(column = 1, row = 0, sticky='news')
app.mainloop()

<grid1.py>

example2

<layout>

Increases the weight value of column1 to twice the value of column0.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")


app.columnconfigure(0, weight=1)    #Weight : Relative scale for distributing extra space. Default value is 0 ( Not grow if there's extra space )
app.columnconfigure(1, weight=2)
app.rowconfigure(0, weight=1)

frame = tb.Frame(app, bootstyle="primary", width=100, height=100)
frame.grid(column = 0, row = 0, sticky='news')
frame2 = tb.Frame(app, bootstyle="warning", width=100, height=100)
frame2.grid(column = 1, row = 0, sticky='news')

app.mainloop()

<grid2.py>

Example3

<layout>

Increases the weight value of row1 to twice the value of row0. Note that the size of the frame widget is very small. If you increase this value, you may not be able to achieve the desired ratio if the parent window is not large enough.

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")


app.columnconfigure(0, weight=1)
app.columnconfigure(1, weight=2)
app.rowconfigure(0, weight=1)
app.rowconfigure(1, weight=10)


frame = tb.Frame(app, bootstyle="primary", width=10, height=10)
frame.grid(column = 0, row = 0, rowspan=2, sticky='news')
frame2 = tb.Frame(app, bootstyle="warning", width=10, height=10)
frame2.grid(column = 1, row = 0, sticky='news')
frame3 = tb.Frame(app, bootstyle="success", width=10, height=10)
frame3.grid(column = 1, row = 1, sticky='news')

app.mainloop()

<grid3.py>

Example4 - Login window

import ttkbootstrap as tb

app = tb.Window()
app.style.theme_use("superhero")
app.geometry("300x180")

app.columnconfigure(0, weight=1)
app.columnconfigure(1, weight=1)
app.columnconfigure(2, weight=1)
app.columnconfigure(3, weight=1)
app.columnconfigure(4, weight=1)
app.rowconfigure(0, weight=1)
app.rowconfigure(1, weight=1)
app.rowconfigure(2, weight=1)

username = tb.Label(app, bootstyle="primary", text='Username')
username.grid(column = 0, row = 0,  sticky='news', padx=10)
username_entry = tb.Entry(app, bootstyle="primary")
username_entry.grid(column = 1, row = 0, columnspan=3)

password = tb.Label(app, bootstyle="primary", text='password')
password.grid(column = 0, row = 1, sticky='news', padx=10)
paswword_entry = tb.Entry(app, bootstyle="primary")
paswword_entry.grid(column = 1, row = 1, columnspan=3)

login_btn = tb.Button(app, bootstyle="success", width = 10, text='Login')
login_btn.grid(column = 0, row = 2, columnspan= 2)

cancel_btn = tb.Button(app, bootstyle="success", width = 10, text='Cancel')
cancel_btn.grid(column = 2, row = 2, columnspan= 2)

app.mainloop()

<grid4.py>

This is the rresult.