Grid layout.

Layout a series of widgets in a grid. The grid has a specified number of columns. Example:

from flexx import flx

class Example(flx.Widget):
    def init(self):
        with flx.HSplit():
            with flx.GridLayout(ncolumns=3):
                flx.Button(text='A')
                flx.Button(text='B')
                flx.Button(text='C')
                flx.Button(text='D')
                flx.Button(text='E')
                flx.Button(text='F')

            with flx.GridLayout(ncolumns=2):
                flx.Button(text='A', flex=(1, 1))  # Set flex for 1st row and col
                flx.Button(text='B', flex=(2, 1))  # Set flex for 2nd col
                flx.Button(text='C', flex=(1, 1))  # Set flex for 2nd row
                flx.Button(text='D')
                flx.Button(text='E', flex=(1, 2))  # Set flex for 3d row
                flx.Button(text='F')
open in new tab


class flexx.ui.GridLayout(*init_args, **kwargs)

Inherits from: Layout

A layout widget that places its children in a grid with a certain number of columns. The flex values of the children in the first row determine the sizing of the columns. The flex values of the first child of each row determine the sizing of the rows.

The node of this widget is a <div>, which lays out it’s child widgets and their labels using CSS grid.

properties: ncolumns

actions: set_ncolumns

ncolumns

IntProp – The number of columns of the grid.

set_ncolumns(*val)

action – Setter for the ‘ncolumns’ property.