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:
- Specify how a background color or image should fill its parent container.
- Adjust the size of gutters within a grid (how much space exists between columns.)
- Set the columns in a grid to automatically stack, or display side-by-side.
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.
Advanced Calc Options
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.
Box Fill Options
These toggles allow the size of an element to automatically change based on the size of the user's browser window.
- Match browser height will make the element automatically expand its height to match the user's browser height.
- Full width. If the element is placed within another element or container, it will automatically stretch to match the width of its parent. If it is placed directly on the page, it will automatically stretch to match the width of the browser window (even if that extends beyond the specified site width.)
- Match site width will make the element automatically expand to match the width of the website (as specified by the ruler at the top of your screen.)
Background Fill Options
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:
Stack or Split Grid
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.
- By default (neither option selected), the columns of a grid will display side-by-side, and the columns will scale to fit the overall width of the grid.
- Stack will set each column to 100% of the width of the grid element, and lay them out in a vertical stack.
- Split will display the columns in a 2-across layout. If you have an odd number of columns, the leftover column will be displayed full-width at the bottom.