The dimensions panel allows you to control the basic layout parameters of any element on the page: its height, width, padding, and margin. In addition, this panel contains controls to:

Some of the tools found within the Dimensions Panel can also typically be found in the contextual toolbar at the top of your screen, depending on the element that you've selected.

To open the Dimensions Panel, click the icon on the right toolbar, select it from the "Window" menu, or press <shift>-D on your keyboard.

These inputs will give you precise control over the size of an element on the page. Note that you can also edit these values on the stage itself using your mouse, by dragging the different handles in the focus frame of a selected element.

Use this input to set the maximum width of the element.  This prevents the element from becoming wider than the max-width value, regardless of how wide the browser window gets. You can enter a pixel value, or a percentage of the parent container.

Using max width is very helpful in keeping your designs intact across very large screens and monitors -- you can use it to ensure that elements of your page never get stretched past a certain point.

The height property is used to set the height of an element. You can enter a pixel value, but it is not possible to set the height to a percentage.

Assigns an exact width to any element or grid. You can enter a pixel value, or a percentage of the parent container.

The overflow property specifies what happens if the content inside an element is too large to fit. Checking this box will automatically hide (clip) any content that overflows past the edge of the element. 

The Dimensions Panel also has some tools for calculating the dimensions of an element via simple math (subtraction, addition, multiplication, and division.)

You can use this to allow an element's width and/or height to flex with the browser, while ensuring that it maintains a fixed amount of margin. Here are some examples of how you can use calculated width and height to create your layouts, and here are even more examples.

These are available via a dropdown in the Dimensions Panel:

The padding property defines the amount of empty space around an element's content. Whereas margin determines the amount of space outside an element, padding determines the amount of space within it.

Padding values can be set for each side of the element independently, using pixels or percentages, and cannot accept negative values. 

Use the "Link All" checkbox to ensure that the same amount of padding is always maintained on all sides of the element. While this is checked, any change to one of the values will update the other three to match.

The margin property defines the amount of empty space around an element. Whereas padding determines the amount of space within an element, margin determines the amount of space outside it.
​
Margin values can be set for each side of the element independently, using pixels or percentages.
​
Use the "Link All" checkbox to ensure that the same amount of margin is always maintained on all sides of the element. While this is checked, any change to one of the values will update the other three to match.

As in print publishing, gutters are the whitespace between columns. 

The size of the gutters in a grid element can be controlled with the gutter slider, or by entering a value.

These toggles allow the size of an element to automatically change based on the size of the user's browser window.

These toggles allow you to control the extent of an element's background color or background image.

By default, an element's background will extend to the full width of the browser:

By toggling the box fill mode, you can limit an element's background so that it only extends to the full width of the website:

The stack or split grid functions change the layout of the columns in a grid element. 

A common need is to display a grid's columns in a side-by-side layout on larger devices, then have it collapse to a stack on smaller screens. These toggles will let you achieve this effect, so that the grid can be optimized for mobile devices. 

To use these layout options, first select a device mode from your top toolbar.