---
title: "グリッドの追加と設定"
slug: "add-and-configure-grids"
abstract: "コンポーネントにグリッドを追加し、行や列の追加・削除を設定する方法を説明します。"
---
# グリッドの追加と設定

コンポーネントを作成すると、デフォルトで12列5行のグリッドを含む単一のセクションになります。

## コンポーネントに追加セクションを追加する

デフォルトではコンポーネントは1つのセクションを持ちますが、さらにセクションを追加でき、それぞれのセクションごとにグリッドを独立して設定できます。

コンポーネントに追加セクションを追加するには:

1.  コンポーネントビルダーで、すでに要素がある場合は外部のコンポーネントキャンバスをクリックしてください。
    
2.  **セクション**コンテキストツールバーで「**セクション>要素を追加**」**をクリックします。**
    
3.  現在のセクションの上下に新しいセクションを追加するには、カーソルを現在のセクションの上部か下部に動かし、グリッドカーソルがハイライトされているのを確認してからクリックします。
    
    ![addsection.png](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/addsection.png)
    

追加のセクションは :mdiTrashCanOutline: をクリックすると削除できます。最後のセクションを削除すると、以前に追加された要素がグリッドから消えます。

## セクションのグリッドを設定する

デフォルトではセクションのグリッドは12列5行で構成されていますが、列の削除や行の追加・削除を設定することも可能です。

グリッド内の列数はレスポンシブ設計でよく使われます。例えば、大型デバイス用12列、中型機器用8列、小型機器用4列のグリッドを使って異なるバージョンのコンポーネントを作成できます。

行数はコンポーネントの設計によって決まります。高い構成要素はより多くの行数を必要とします。行数が正しく調整されていないと、コンポーネント内に空きスペースができたり、逆にユーザーはスクロールしてコンポーネントの下部を見る必要があります。

セクションを設定するには:

-   右側のパネルにある **セクション設定** オプションを使って、列数と行数を変更してください。
-   段数はセクションの下にあるダブルアローを上下にドラッグして変更します。

## 行を拡張可能にする

デフォルトのグリッドに描画された要素は絶対サイズを持ち、要素の多行内容がその要素のサイズを超える場合は切り落とされることがあります。このため、要素にマッピングされたコンテンツが含まれている場合、グリッド内に1つ以上の拡張可能な行を定義することを推奨します。そうすれば、その拡張可能な行の上に構築されたコンテナが自動的にその内容を受け入れるように成長します。

行を拡張可能にするには:

1.  コンポーネントビルダーで、すでに要素がある場合は外部のコンポーネントキャンバスをクリックしてください。
2.  左側のペインの **レイアウト&アラインメント**で「 **グリッドサイズ**」をクリックします。
3.  **「Expandable rows」**セクションで「**Make a row expandable**」をクリックします。
4.  ドロップダウンメニューで、どの行を展開可能にするか選びます。グリッド内の位置(1行目、中央、最後行)や行番号(例えば3行目)に基づいて行を指定することができます。

拡張可能な列は薄いグレーのハイライトがあることで認識できます。