How to Create a Grid Layout?

[jorpyy]

How to create a layout like this:
A a
B b
C c
D d
E e

`
import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW

 characters = ['a', 'b', 'c', 'd', 'e']

 class EnglishAlphabet(toga.App):
 def startup(self):
    main_box = toga.Box()
    column_box = toga.Box(
        style=Pack(direction=COLUMN)
        )
    container_box = toga.Box(
        style=Pack(direction=ROW)
        )
    for character in characters:
        upperCase = toga.Label(character.upper())
        lowerCase = toga.Label(character)
        container_box.add(upperCase)
        container_box.add(lowerCase)
        column_box.add(container_box)
    
    scroll = toga.ScrollContainer(content=column_box)
    main_box.add(scroll)
    self.main_window = toga.MainWindow(title=self.formal_name)
    self.main_window.content = main_box
    self.main_window.show()

def main():
    return EnglishAlphabet()

`

[freakboy3742]

At present, there isn't a native grid layout mechanism in Toga; See #2162 for the ticket tracking the feature request.

In the meantime, the best option is to have a column box, each of which contains a series of row boxes where each widget at position N has either (a) a fixed width, or (b) a common flex value.

In your example, you'd need to duplicate the container_box constructor so you're creating multiple ROW boxes (one for each row of the grid); you'd then add either width=N (for some value of N - say, 100), or flex=1 to upperCase and lowerCase. If you want the grid to be sized so that the first column is twice the size of the second column, you'd set flex=2 on upperCase, and flex=1 on lowerCase.

This won't guarantee a grid - if any of the individual widgets exceed the minimum width allocation, the grid will start to be misalighned; but when there's sufficient space for an unconstrained layout, the grid should be aligned.