Version:

    Understanding the responsive grid preview

    The responsive grid user interface provides a visual preview of your grid for each device width.

    What the preview shows

    • The outer gutters (highlighted in pink)
    • The inner gutters (highlighted in blue)
    • The grid columns (this is the space between the gutters)
    • The minimum width (highlighted in gold)
    • The boxed width (highlighted in green) What is boxed width?

    Responsive-grid-preview.png

    Preview width

    The preview width is fixed to the minimum width. When viewing the preview on smaller devices, the preview will scroll horizontally because the width is fixed. This allows you to preview the width of the Desktop settings even on a mobile device.

    Preview columns

    You can also set the number of columns displayed in the preview using the Preview columns dropdown. This is to help you see what the grid will look like with different numbers of columns. This is useful on narrower breakpoints where 12 columns with inner gutters doesn't actually fit within the device width. The preview columns are only a visual aid and do not effect the actual number of columns in your grid which is always 12.

    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.