---
title: "Configuring your responsive grid settings"
date: "2017-11-10T15:42:10+00:00"
summary: "Configure your website's responsive grid settings in Site Studio. Learn how to set breakpoints, adjust gutters, and choose between fixed and fluid layouts for optimal display across devices."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/configuring-your-responsive-grid-settings"
id: "39a3c5cb-333e-40bd-8a4a-398f73ea6646"
---

Table of contents will be added

Site Studio allows you to configure your website grid and your responsive breakpoint widths.

Before you start
----------------

Before you set up your responsive grid it is helpful to understand some key concepts:

*   How the breakpoints work. See [Understanding the responsive breakpoints](/drupal-starter-kits/add-ons/site-studio/understanding-responsive-breakpoints "Understanding the responsive breakpoints")
*   What Boxed width is. See [What is boxed width?](/drupal-starter-kits/add-ons/site-studio/what-boxed-width "What is boxed width?")
*   The difference between fixed and fluid grids. See [Fixed vs. fluid grid](/drupal-starter-kits/add-ons/site-studio/fixed-vs-fluid-grid "Fixed vs. fluid grid")
*   What the responsive grid preview shows. See [Understanding the responsive grid preview](/drupal-starter-kits/add-ons/site-studio/understanding-responsive-grid-preview "Understanding the responsive grid preview").

Set up your responsive grid
---------------------------

**Step 1** - Choose desktop or mobile first:

1.  Navigate to Site Studio > Website settings > **Responsive grid settings**
2.  Click on the **Desktop or mobile first** dropdown and select **Desktop first** or **Mobile first**

Also in settings is the number of columns which in this case is set to 12. You cannot change this setting

![106073ee-Responsive-grid-settings-v5.png](https://acquia.widen.net/content/9c7136bb-a296-4e26-bd51-79a2a673f0e5/web/106073ee-Responsive-grid-settings-v5.png)

Important

Once you've started building styles and layouts, changing the grid between Desktop and Mobile first will cause unexpected results and should be avoided.

**Step 2** - Enter your settings for each device width:

1.  **Minimum width** (highlighted in gold) - This sets the minimum width that any settings or styles for that breakpoint will apply
2.  **Inner gutters** (highlighted in blue) - This sets the gap between columns in your layout
3.  **Outer gutters** (highlighted in pink) - This sets a gutter to the outside of your layout so that the browser edges never touch the edge of your layout
4.  **Boxed width** (highlighted in green) - Once you've set your outer gutters you will see that the value in the Boxed width field is equal to your minimum width minus your outer gutters. You cannot edit this value directly. To change it you must change the minimum width or the outer gutter width
5.  **Type** - This refers to the way in which the grid changes from one breakpoint to the next. Set it to **Fixed** and the grid will snap from one breakpoint to the next. Set it to **Fluid** and it will scale gradually from one breakpoint to the next
6.  Click **Save**

![60c875b6-Responsive-grid-preview.png](https://acquia.widen.net/content/9d11d338-efaf-466e-8992-8fdc75f548c2/web/60c875b6-Responsive-grid-preview.png)

Set up your responsive grid on an existing website
--------------------------------------------------

If you're using Site Studio on an existing website, you will already have configured your responsive breakpoints within Drupal's YAML file and your website grid within your theme. Site Studio does not work with or alter these settings.

Pages, styles and templates using Site Studio will use Site Studio's responsive grid settings and breakpoint widths. If you want to match these to the rest of your website you can replicate the widths you've set within your YAML file and your theme within Site Studio's responsive grid settings.