gridbox

Il componente gridbox crea un contenitore basato su CSS Grid Layout per disporre gli elementi in una griglia bidimensionale con righe e colonne. A differenza di flexbox (che è monodimensionale), gridbox permette di controllare simultaneamente sia le righe che le colonne, rendendolo ideale per layout complessi, form avanzati e dashboard.

Gridbox offre un controllo preciso su:

• Numero e dimensione delle colonne

• Posizionamento esatto degli elementi nella griglia

• Span di elementi su più righe o colonne

• Allineamento degli elementi all’interno delle celle

• Spaziatura uniforme tra righe e colonne

È particolarmente utile quando serve creare layout strutturati e prevedibili dove gli elementi devono allinearsi su più assi contemporaneamente.

Sintassi

pane.gridbox(columns=None, align_content=None, justify_content=None,
                align_items=None, justify_items=None, table=None, **kwargs)

Esempi

Griglia semplice a 3 colonne

Griglia con elementi di dimensioni diverse

Form con gridbox

Form con labledBox stilizzate

Quando usare gridbox

Gridbox è ideale per:

• Form complessi: Quando serve controllo preciso sul layout dei campi

• Dashboard: Organizzare sezioni di contenuto in modo strutturato

• Layout a griglia: Gallerie di immagini, card, tiles

• Interfacce tabellari: Quando serve allineamento su più assi

• Layout responsive: Usando columns dinamico con reactive binding

Differenza con flexbox:

• Gridbox: Layout bidimensionale (righe E colonne simultaneamente)

• Flexbox: Layout monodimensionale (riga O colonna)

Se il layout è principalmente in una direzione con elementi che devono adattarsi dinamicamente, usa flexbox . Se serve allineamento strutturato su entrambi gli assi, usa gridbox().

---

Parametri:

Nome parametro	Tipo	Descrizione
columns	L	Permette di specificare il numero di colonne della griglia (es: columns=5)
align_content	T	Equivale al parametro CSS «align-content», e permette di specificare come gestire lo spazio tra gli elementi della flexbox rispetto all’asse orizzontale (es: align_content=”space-between”)
justify_content	T	Equivale al parametro CSS «justify-content», e permette di specificare come gestire lo spazio tra gli elementi della flexbox rispetto all’asse verticale (es: justify_content=”space-around”)
align_items	T	Equivale al parametro CSS «align-items», e permette di specificare come disporre gli elementi della flexbox rispetto all’asse orizzontale (es: align_items=”center”)
justify_items	T	Equivale al parametro CSS «justify-items», e permette di specificare come disporre gli elementi della flexbox rispetto all’asse orizzontale (es: justify_items=”stretch”)
table	T	Permette di specificare la tabella di riferimento per la gridbox (es: table=”adm.user”). Così facendo sarà possibile inserire nella gridbox elementi di tipo «field»
gap	T	Permette di definire una spaziatura uniforme tra gli elementi della griglia (es: gap=”10px”)
Html Parametri
_class	T	Permette di assegnare una specifica classe CSS al widget
height	T	Permette di assegnare un’altezza al widget
width	T	Permette di assegnare una larghezza al widget
border	T	Permette di assegnare un bordo al widget
rounded	L	Permette di assegnare un arrotondamento al widget
style	T	Permette di assegnare uno stile (da esprimersi come serie di attributi CSS) al widget
background	T	Permette di assegnare uno sfondo al widget
Children attributes Parametri
colspan	L	Numero di colonne che l’elemento deve occupare (es: colspan=2)
rowspan	L	Numero di righe che l’elemento deve occupare (es: rowspan=2)

Autore della sezione: Davide Paci

Data di pubblicazione 20-08-2024