> Markdown version of [Laying Out Views](https://vaadin.com/docs/next/tools/designer/using-designer/layout). Section index: [llms.txt](https://vaadin.com/docs/next/tools/llms.txt)

# <a id="designer.layout"></a>Laying Out Views (deprecated since V25.0)

> **Warning:** Vaadin Designer has been deprecated since V25.0, in favor of [Vaadin Copilot](https://vaadin.com/docs/next/tools/copilot.md). Going forward, Copilot is where the design-to-code workflow evolves.
>
> Designer still works with V25, but it’s no longer developed and it may be removed in a future version. It also doesn’t support the Aura theme.

Layout is defined as the particular way components are arranged in your view.

To arrange the components in Vaadin Designer, you can use the layout components provided by Vaadin. You can combine and nest special purpose layouts and the more general-purpose Vertical and Horizontal layouts.

Additionally, you can define the sizes of the components, as well as the empty space between them.

## <a id="designer.layout.components"></a>Layout Components

Vaadin supports many pre-built [layout components](https://vaadin.com/docs/next/components.md#layouts) for you to quickly start constructing a view.

| Layout Component                                                                  | Description                                                                                                                      |
| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
| [App Layout](https://vaadin.com/docs/next/components/app-layout.md)               | Provides a quick and easy way to get a common application layout structure done. Allows setting the logo, menu and page content. |
| [Form Layout](https://vaadin.com/docs/next/components/form-layout.md)             | Provides a configurable responsive layout for form elements, making sure your form content stays readable on all devices.        |
| [Split Layout](https://vaadin.com/docs/next/components/split-layout.md)           | Allows you to partition a layout into resizable areas.                                                                           |
| [Horizontal Layout](https://vaadin.com/docs/next/components/horizontal-layout.md) | Provides a layout to align your HTML elements horizontally.                                                                      |
| [Vertical Layout](https://vaadin.com/docs/next/components/vertical-layout.md)     | Provides a layout to align your HTML elements vertically.                                                                        |

## <a id="designer.creating.vh.layouts"></a>Vertical & Horizontal Layouts

These are the most essential layouts, which can be nested under each other, or different layouts to construct more complex ones. For these layouts, Designer supports Flexbox editor to position their child elements.

> **Note:** Flexbox editor uses CSS flexbox layout. To learn about Flexbox, see this [flexbox guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).

### <a id="designer.creating.complex.layout.flex.container"></a>Flex Container

Vertical and Horizontal layouts are flex containers. You can also use native HTML elements (like the `div` element) as flexbox containers by setting their `display` CSS property to `flex` or `inline-flex`.

When selecting a flex container in Designer, the Flex Container panel appears near the bottom-right corner.

[Image: designer 3 layout flex container]

Flex Container

#### <a id="direction"></a>Direction

Represents [`flex-direction`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) CSS property, defining the main-axis for child items. X-axis or Y-axis enables `row` (horizontal) or `column` (vertical) direction, respectively. To reverse the current direction, enable `Reverse` checkbox.

#### <a id="align"></a>Align

Represents [`align-items`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) CSS property, defining how child items are laid out along the cross axis which runs perpendicular to the current main-axis.

#### <a id="justify"></a>Justify

Represents [`justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) CSS property, defining how child items are aligned along the main-axis and how free spaces between them are distributed.

#### <a id="wrap"></a>Wrap

Represents [`flex-wrap`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS property, allowing child items to be wrapped onto multiple lines when they can’t be fitted in one line. To wrap items from bottom to top, enable `Reverse` checkbox.

#### <a id="align-2"></a>Align

Represents [`align-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) CSS property, this property appears only when child items can be wrapped. Since wrapped items can occupy multiple lines, this property aligns those lines when there is an extra space.

### <a id="designer.creating.complex.layout.flex.item"></a>Flex Item

Elements inside a flex container are flex items. The Flex Item panel appears when selecting a flex item. In case the selected item is also a flex container, both panels are shown.

[Image: designer 3 layout flex item]

Flex Item

#### <a id="sizing"></a>Sizing

Represents [`flex-grow`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) and [`flex-shrink`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS properties, allowing a flex item to take more or less space than other elements.

#### <a id="align-3"></a>Align

Represents [`align-self`](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) CSS property, allowing a specific flex item to override the Align setting of its parent container.

## <a id="designer.sizing.and.spacing"></a>Sizing & Spacing

To give a component a specific size and define the empty space around and inside it, you can use the size and space panel located in the properties panel.

[Image: designer size space]

Size & Space Panel

Set the following:

1. [width and height](#designer.sizing.and.spacing.width.and.height) to set and constrain the size of the component

2. [margin](#designer.sizing.and.spacing.margin.and.padding) to define the empty space around the component

3. [padding](#designer.sizing.and.spacing.margin.and.padding) to define the empty space between the component and its content

4. [spacing](#designer.sizing.and.spacing.spacing) to define the empty space between the component’s children (only for VL and HL)

See the following figure for illustration:

[Image: designer size and space model]

Size & Space Panel Model: Horizontal Layout Example

> **Note: T-Shirt Size Definitions**
>
> When the Lumo theme is in use, the margin, padding and spacing properties accept t-shirt sizes which translate to the corresponding [spacing properties](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties/size-space.md#space). Otherwise, the property values map directly to the corresponding CSS properties.

### <a id="designer.sizing.and.spacing.width.and.height"></a>Width & Height

[Image: designer size space width height]

Width & Height Properties

Set width and height, as well as constrain their minimum and maximum values.

These properties map directly to the CSS properties [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width), [`min-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width), [`max-width`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width), [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height), [`min-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) and [`max-height`](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height).

### <a id="designer.sizing.and.spacing.margin.and.padding"></a>Margin & Padding

[Image: designer size space margin padding]

Margin & Padding Properties

Set margin and padding. Setting `Margin` or `Padding` sets the same value to all edges. Individual edges can be set or overridden by setting values to the `Left`, `Top`, `Right` and `Bottom` properties.

These properties map directly to the CSS properties [`margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin), [`margin-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-left), [`margin-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right), [`margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top), [`margin-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom), [`padding`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding), [`padding-left`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left), [`padding-right`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right), [`padding-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top) and [`padding-bottom`](https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom). If Lumo theme is in use, then, additionally, t-shirt sizes are translated to [`--lumo-space-*`](https://cdn.vaadin.com/vaadin-lumo-styles/1.6.0/demo/sizing-and-spacing.html#custom-properties) variables.

### <a id="designer.sizing.and.spacing.spacing"></a>Spacing

[Image: designer size space spacing]

Spacing Property

Set empty space between child components of Vertical and Horizontal layouts. When the Lumo theme is in use, a set of t-shirt sizes are available as options. The sizes correspond to the sizes available for margin and padding.

`2488EECB-659A-44B3-AEF1-0DD02A6EEE25`