# グリッドレイアウトを作成する

## 概要

このチュートリアルでは、利用可能なさまざまなコンポーネントを使用して、動的で視覚的に魅力的なグリッドレイアウトを作成する方法を案内します。グリッドレイアウトは、機能、製品、またはソリューションをそれぞれ専用の「詳細を見る」ボタン付きで紹介するのに最適です。 

次のものを使用します： [Avonni レイアウト](/experience-cloud/experience-cloud-ja/experience-components/ax-reiauto.md), [Avonni コンテナ](/experience-cloud/experience-cloud-ja/experience-components/ax-konten.md), [Avonni アイコン](/experience-cloud/experience-cloud-ja/experience-components/ax-aikon.md)、テキストブロック、および [Avonni ボタン](/experience-cloud/experience-cloud-ja/experience-components/ax-botan.md) コンポーネント。

<details>

<summary>なぜこれらのコンポーネントを使用するのか？</summary>

1. **Avonni レイアウト：** これはグリッドレイアウトの基盤です。コンテンツを整理されたグリッド形式に構成でき、ユーザーがさまざまな項目をより簡単にナビゲートできるようになります。
2. **Avonni コンテナ：** グリッドの各項目は Avonni コンテナで囲まれます。これにより、異なる製品や機能を区切り、各項目に対してクリーンで独立したスペースを提供します。
3. **Avonni アイコン：** アイコンは機能や製品を視覚的に表現するのに優れています。コンテンツに図的要素を加え、より魅力的で理解しやすくします。
4. **テキストブロック：** ここに各機能や製品の説明文を追加します。テキストブロックコンポーネントは、明確で簡潔な情報提供を可能にします。
5. **Avonni ボタン：** グリッド内の各項目の下にある「詳細を見る」ボタンは、ユーザーを追加情報へ誘導します。このコールトゥアクションはユーザーの関与を促し、より詳細なコンテンツを提供します。

</details>

<figure><img src="/files/f1fbf7f0a076bdb81fa8f7a9d8981e561a56ab16" alt=""><figcaption><p>最終結果</p></figcaption></figure>

## 対話型ステップバイステップ構成ガイド

{% @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-ja/chtoriaru/ysuksu/guriddoreiautowosuru.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.