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

グリッドシステムは、一貫したデザインを持ち、クロスブラウザ対応を保証するレスポンシブなウェブサイトを作成するのに役立ちます。グリッドシステムはページを等しい列に分割します。

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

使用するグリッドシステムによって、ページは複数の列に分割されます。ページ上の列の分割方法を自由に選べます。すべてのSXAページで、行と列の分割器を使って、利用可能なスペースを水平・垂直に分割し、必要なページ構造を作成できます。

例えば:

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

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

デフォルトで、SXAにはサイト作成時に選択できる4つの異なるグリッドシステムがあります:Bootstrap 3、Bootstrap 4、Foundation、そしてGrid 960です。

![On the Grid tab you select one of the four available grid systems](https://doc.sitecore.com/api/markdown-image/xp/ja/users/sxa/93/sitecore-experience-accelerator/images/SXA-grids.png)

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

> !注サイト作成後にグリッドシステムを変更するには多くの手動変更が必要になることを認識しておくことが重要です。ページ上の以前のグリッドシステムへの参照があるため、レイアウトが壊れてしまいます。

SXAは他のグリッドフレームワークの統合をサポートしており、自分で構築することも可能です。