# Creazione di un layout a griglia

## Panoramica

Questo tutorial ti guiderà nella creazione di un layout a griglia dinamico e visivamente accattivante utilizzando vari componenti disponibili. Il layout a griglia è ideale per mostrare funzionalità, prodotti o soluzioni, ognuno con un pulsante dedicato "Scopri di più". 

Useremo il [Avonni Layout](/experience-cloud/experience-cloud-it/experience-components/ax-layout.md), [Avonni Container](/experience-cloud/experience-cloud-it/experience-components/ax-container.md), [Avonni Icon](/experience-cloud/experience-cloud-it/experience-components/ax-icon.md), Text Block e [Avonni Button](/experience-cloud/experience-cloud-it/experience-components/ax-button.md) componenti.

<details>

<summary>Perché usare questi componenti?</summary>

1. **Avonni Layout:** Questa è la base del nostro layout a griglia. Ci permette di strutturare il contenuto in un formato organizzato basato su griglia, rendendo più facile per gli utenti navigare tra i vari elementi.
2. **Avonni Container:** Ogni elemento nella griglia sarà racchiuso all'interno di un Avonni Container. Questo aiuta a segmentare prodotti o funzionalità diverse, fornendo uno spazio pulito e isolato per ciascun elemento.
3. **Avonni Icon:** Le icone sono un ottimo modo per rappresentare visivamente le funzionalità o i prodotti. Aggiungono un elemento grafico al contenuto, rendendolo più coinvolgente e più facile da interpretare.
4. **Text Block:** Qui aggiungerai il testo descrittivo per ogni funzionalità o prodotto. Il componente Text Block consente una comunicazione chiara e concisa delle informazioni.
5. **Avonni Button:** Un pulsante "Scopri di più" sotto ogni elemento della griglia guida gli utenti verso informazioni aggiuntive. Questa chiamata all'azione aumenta il coinvolgimento degli utenti e fornisce contenuti più dettagliati.

</details>

<figure><img src="/files/09a3873c738b77e71261d0a4f84aaea95b8b53d0" alt=""><figcaption><p>Risultato finale</p></figcaption></figure>

## Guida interattiva alla configurazione passo dopo passo

{% @arcade/embed flowId="1J7nuyn2prIAQOMCgeii" url="<https://app.arcade.software/share/1J7nuyn2prIAQOMCgeii>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/tutorial/casi-duso/creazione-di-un-layout-a-griglia.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.