.. _widgetpedia/elements/gnrwidgets/gridbox:

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
------
.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/gridbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Griglia semplice a 3 colonne ", "example_name": "simple"} );'>
                Griglia semplice a 3 colonne 
            </a>
            <div></div>
        </div> 
        

Griglia con elementi di dimensioni diverse

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/gridbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Form con gridbox ", "example_name": "gridbox"} );'>
                Form con gridbox 
            </a>
            <div></div>
        </div> 
        

.. raw:: html

 <div class="gnrexamplebox">
            <a class="gnrexamplebox_title" onclick='gnrExampleIframe(this.nextElementSibling,{"height": 200, "width": "100%", "examples_root": "https://dev.genropy.org/webpages/docu_examples", "examples_root_local": "", "example_folder": "widgetpedia/elements/gnrwidgets/gridbox", "parsstring": "?_source_viewer=stack&_source_toolbar=f&cm_theme=night", "example_label": "Form con labledBox stilizzate ", "example_name": "labledbox"} );'>
                Form con labledBox stilizzate 
            </a>
            <div></div>
        </div> 
        

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  :ref:`flexbox<widgetpedia/elements/gnrwidgets/flexbox>` . Se serve allineamento strutturato su entrambi gli assi, usa ``gridbox()``.
                  

.. raw:: html

 <hr>

**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)                                        |
+------------------------+------+--------------------------------------------------+

.. sectionauthor:: Davide Paci

.. raw:: html

   <p style="font-size:0.8em;">Data di pubblicazione 20-08-2024</p>