# Crear un diseño de cuadrícula

## Descripción general

Este tutorial le guiará para crear un diseño de cuadrícula dinámico y visualmente atractivo usando varios componentes disponibles. El diseño de cuadrícula es ideal para mostrar funciones, productos o soluciones, cada uno con un botón dedicado de "Más información". 

Usaremos el [Avonni Layout](/experience-cloud/experience-cloud-es/experience-components/ax-diseno.md), [Contenedor Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-contenedor.md), [Avonni Icon](/experience-cloud/experience-cloud-es/experience-components/ax-icono.md), Bloque de Texto, y [Avonni Button](/experience-cloud/experience-cloud-es/experience-components/ax-boton.md) componentes.

<details>

<summary>¿Por qué usar estos componentes?</summary>

1. **Avonni Layout:** Esta es la base de nuestro diseño de cuadrícula. Nos permite estructurar nuestro contenido en un formato organizado basado en cuadrículas, facilitando a los usuarios navegar por los distintos elementos.
2. **Avonni Container:** Cada elemento en la cuadrícula estará encapsulado dentro de un Avonni Container. Esto ayuda a segmentar diferentes productos o funciones, proporcionando un espacio limpio y aislado para cada elemento.
3. **Avonni Icon:** Los iconos son una excelente manera de representar visualmente las funciones o productos. Añaden un elemento gráfico al contenido, haciéndolo más atractivo y más fácil de interpretar.
4. **Bloque de Texto:** Aquí es donde añadirá el texto descriptivo para cada función o producto. El componente de bloque de texto permite una entrega de información clara y concisa.
5. **Avonni Button:** Un botón de "Más información" debajo de cada elemento en la cuadrícula guía a los usuarios hacia información adicional. Este llamado a la acción impulsa la participación del usuario y proporciona contenido más detallado.

</details>

<figure><img src="/files/cc3fd5180c344de4dd299d1d1af2df3244d4d5f7" alt=""><figcaption><p>Resultado final</p></figcaption></figure>

## Guía interactiva de configuración paso a paso

{% @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-es/tutoriales/casos-de-uso/crear-un-diseno-de-cuadricula.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.