---
title: "グリッドレイアウト"
slug: "the-grid-layout-973888"
abstract: "SXAはレスポンシブグリッドレイアウトに基づいています。"
---
# グリッドレイアウト

グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。グリッドシステムはページを複数の列に分割します。ページ上の列をどのように分割するかを選べます。行と列の分割器を使って、利用可能なスペースを水平・縦に分割し、必要なページ構造を作成できます。

例えば:

![Different options to divide columns on the page.](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/7F7DA99374034426A9D96540E6822E8B.png)

![0EA9B7DA9F0546B29E52466C6EE4D29C.png](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/0EA9B7DA9F0546B29E52466C6EE4D29C.png)

グリッドシステムによってマージン、列幅、挙動などが異なります。ほとんどのシステムはデバイスタイプ(例:モバイル、タブレット、デスクトップ)で分類しています。

エクスペリエンスエディターで、グリッドの列をページ、リボン、**ビュー** タブの **「ショー** 」セクションで表示するには、「 **グリッド**」を選択します。

![Show grid](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/103/sitecore-experience-accelerator/images/SXA-headless-ee-show-grid.png)

デフォルトでSXAはBootstrap 5グリッドシステムを搭載しています。SXAは他のグリッドフレームワークの統合をサポートしており、自分でグリッドフレームワークを構築することも可能です。

> !注サイト作成後にグリッドシステムを変更するには、複数の手動変更が必要です。ページの古いグリッドシステムへの参照があるため、レイアウトが壊れてしまいます。