> For the complete documentation index, see [llms.txt](https://vshop.gitbook.io/vshop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://vshop.gitbook.io/vshop/theme-settings/layout.md).

# Layout

Change the website's container layout

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Theme settings**
2. Locate **Layout**
3. Make necessary changes
4. **Save**
   {% endhint %}

<figure><img src="https://370739323-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUoKuJAeox3jObJjxBdwE%2Fuploads%2F26TfshGUE0VFfLrTouGZ%2Flayout.png?alt=media&amp;token=af021ffd-35e9-4e71-8517-2c5c376226cd" alt=""><figcaption></figcaption></figure>

**Site width**

Control the overall width of your website’s layout.

* **Default:** Uses the theme’s standard width.
* **Custom width:** Set a specific width (in pixels) for the site layout.\
  *Note:* This option is only active when **Custom width** is enabled.

***

**Fluid container**

The **Fluid container** provides a wider layout than the default site width, allowing content to stretch more across the screen.

* **Fluid container max width:** Adjust the maximum width of the fluid container (in pixels).

***

**Section**

Control the vertical spacing between different sections on your website.

* **Space between sections (desktop):** Set the space between sections on desktop view.
* **Space between sections (tablet):** Adjust spacing between sections when viewed on tablet devices.
* **Space between sections (mobile):** Adjust spacing between sections on mobile devices.

***

**Grid**

The **grid** settings control the spacing between elements arranged in **multiple columns or rows** on your website.

* **Horizontal space:** Adjust the space between columns (left and right).
* **Vertical space:** Adjust the space between rows (top and bottom).