Layout Components

Layout components control how screen components are arranged visually.

You can find them in the LAYOUT section of the Components toolbar section of the Components toolbar.

Available layout components

Component	Purpose
Layout	Groups child components and arranges them vertically, horizontally, or in another configured layout direction.
Grid Layout	Arranges child components into a grid structure.
Card	Groups related content inside a card-style container.
Tabs	Organizes related content into separate tab panels.
Spacer	Adds visual space between components.
Divider	Adds a visual separator between sections of content.

Layout component

Use the Layout component when you need to group components and control how they are positioned.

The Layout component supports multiple layout types that define how child components are arranged:

Layout Type	Purpose
vertical in one column	Stacks components vertically in a single column (default form layout).
horizontal in one row	Places components side by side in a single row.
grid with fixed columns	Arranges components in a grid with a fixed number of columns.
grid with fixed rows	Arranges components in a grid with a fixed number of rows.
normal <div> block	Uses standard block layout behavior without additional structure.
vertical (bottom-up)	Stacks components vertically in reverse order (bottom to top).
horizontal (right-to-left)	Places components horizontally from right to left.
inherit	Inherits layout behavior from the parent container.

Common examples include:

• placing form fields below introductory text
• arranging buttons next to each other
• wrapping a component so it no longer stretches across the full available width
• grouping related fields before applying layout or logic behavior

✅

Tip

Use vertical in one column for most form-based screens. Switch to horizontal or grid layouts when you need tighter alignment or multi-column structures.

Card component

The Card component is provided by the Angular Material library. Use it to group related fields or controls in a self-contained visual container.

For example, a purchase request item can be displayed inside a card so the description, quantity, budget amount, currency, and remove button are clearly grouped as one item.

Grid layout

Use a Grid Layout when related fields should appear in columns instead of one long vertical stack.

A common pattern is to use a two-column grid for form fields such as description, quantity, budget amount, and currency.