How to use Auto Layout

Building with responsive design in Vev

Nina avatar
Written by Nina
Updated over a week ago

Rather than focusing on building for each device, enabling auto layout and setting the parameters allows components to automatically become responsive before your eyes. 👀


By using the auto layout property you can:

  • Stack nested elements within the frame; either vertical or horizontal

  • Resize the frame and nested elements will resize accordingly

  • Create complex components that can be adapted easily per breakpoint

Note: This is an open beta feature which means issues may occur when using it. Please reach out to Support to report issues you experience.

Enable Auto Layout

You can easily enable auto layout to any frame or selected elements by:

  1. Selecting all the elements you'd like to have in an auto-layout frame

  2. With the frame selected, navigate to the right-side Style Panel

  3. Find auto-layout and click the '+' or use the shortcut Shift + A

Note: Auto layout is only supported on frames; you will not be able to apply to sections or individual elements.

Auto Layout Properties

Now that we’ve added auto-layout to a frame, you’ll notice a host of new properties specific to auto layout. These properties will only be applicable to components or frames that have been designated with auto layout.

Direction

The direction will allow you to choose which direction your elements should stack or flow; either horizontally or vertically.

  • By choosing vertical, all the elements will flow on a y-axis.

  • By choosing horizontal, all the elements will flow on an x-axis.

For example:

  • If you want to build a custom navbar, you would use the horizontal direction to define how the elements are positioned.

  • If you want to build a card component, you would use the vertical direction.

Note: The ordering of the nested elements within the frame is based on the order you’ve established in the page content panel. The lowest element in the frame will appear at the top of the frame; the highest will appear at the bottom.

Distribute

Distribute will define how your elements should distribute or align inside the frame. Depending on what you select as your direction you will be able to choose:

  • Horizontal: Left, center, right

  • Vertical: Top, center, bottom

You will also see options for spacing: between, around, and evenly. These properties are best used when you want to structure auto-layout frames inside of a parent auto-layout frame (frame-ception).

Gap

Gap will define the spacing between elements, this is also a useful property for wrapping the nested elements so elements keep a minimum gap between each other.

Wrap Content

Wrap content is a powerful property to create responsive components faster. In short, by toggling wrap content to be ‘on’ your nested elements will reorder themselves or ‘wrap’ based on the breakpoint.

To use this property, you will need to set a width value to the overall container or frame. You can even have an auto-layout frame IN another auto-layout frame (inception), set to wrap content—and voila! You now have a responsive grid of frames.

⭐️ Tip: Wrap content not working for you? Try grouping your components like the cards in the example above into a parent frame, enabling auto-layout and setting your cards to be a fixed width (like pixels). Then voila! Watch as your parent container magically wraps the content to be responsive.

Alignment

Change nested elements to be left, center, or right within the auto layout frame.

Note: For some elements, like text, you may need to also change the alignment in the type tool.

Reordering Elements

Reordering elements is simple. By enabling auto-layout, elements nested with frames can easily be reordered or ‘re-stacked’. It’s as easy as dragging the elements to reorder their position.

You’ll notice that in the left-side page content panel, the elements will also reorder themselves based on their position. A general rule of thumb: the lowest element appears at the top or start of your frame, and the highest element appears at the bottom or end.

Resizing Elements in Auto Layout

Auto layout's most important feature is that it allows you to control how your elements respond to changes in the parent frame. Mastering these resizing behaviours is crucial as part of creating responsive layouts. Below we'll explore the various resizing options available to ensure your design keeps its structure while remaining responsive.

Fixed width or height

When setting an element's dimensions to Fixed width or height, you have the flexibility to choose between Pixels (px), Percentages (%), viewport height/width, or Automatic size (auto). Understanding the implications of each option is essential for creating a responsive and visually consistent layout. Read our detailed guide for a deeper understanding of these settings.

Min width or height

For a more fluid design that maintains a minimum width or height but automatically grows or shrink if bigger than the minimum size, consider using the Min width or Min height options. This is particularly useful when you want to prevent an element from becoming smaller than a specific threshold. Follow these steps to use this option:

  • Select 'Min width' or 'Min height' from the dropdown in the right style panel.

  • Specify the the minimum width or height in the corresponding field.

  • Test this behaviour by resizing the parent frame to ensure the element behaves as intended.

Fill width or height

Elements within an Auto layout set to fill the width or height will dynamically occupy the available space in the frame, automatically growing or shrinking according to the space available. This approach differs, for example, from choosing a fixed width set to 100%, as the element will always occupy 100% of the width, leaving no room for other elements to share the space.

By understanding and using these resizing options within Auto layout, you can create layouts that seamlessly adapt, saving you time when adjusting across breakpoints.


Troubleshooting

Should I use different sizing (px, %, and auto) for my frames with auto-layout?

This may take some trial and error. It's best practice that elements within an auto-layout frame are set to fixed values like pixels while the container itself can be set using relative values like percentages or even automatic sizing.

Wrap content doesn’t seem to work for my grid. The design on tablet and mobile does not look right.

For a responsive grid, you should have a parent frame with auto layout enabled that contains other components or frames. Then:

  • Set the parent frame’s width (any value is fine) and direction to be horizontal with wrap content toggled ‘on’

  • Next, make sure your nested frames' width is set to a fixed value (px); this will ensure that the nested frames will wrap to the next line

  • Lastly, view a different breakpoint and make sure your frames wrap to the next line

Did this answer your question?