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')
-
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.
-