> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/use-cases/creating-a-grid-layout.md).

# Creación de un diseño de cuadrícula

## Resumen

Este tutorial te guiará en la creación de un diseño de cuadrícula dinámico y visualmente atractivo utilizando 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-layout.md), [Contenedor Avonni](/experience-cloud/experience-cloud-es/experience-components/ax-container.md), [Avonni Icon](/experience-cloud/experience-cloud-es/experience-components/ax-icon.md), Bloque de texto, y [Avonni Button](/experience-cloud/experience-cloud-es/experience-components/ax-button.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, lo que facilita a los usuarios navegar por varios elementos.
2. **Avonni Container:** Cada elemento de la cuadrícula se encapsulará 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ás el texto descriptivo para cada función o producto. El componente de bloque de texto permite ofrecer información de forma clara y concisa.
5. **Avonni Button:** Un botón de "Más información" debajo de cada elemento de 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 url="<https://app.arcade.software/share/1J7nuyn2prIAQOMCgeii>" flowId="1J7nuyn2prIAQOMCgeii" %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-es/tutoriales/use-cases/creating-a-grid-layout.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.