Layout (Container, Stack, Flex, Grid, Divider) for Angular

import { AuiStack, AuiFlex, AuiGrid, AuiContainer } from '@absoluteui/angular/layout';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Layout (Container, Stack, Flex, Grid, Divider) page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { layout: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiGrid, AuiStack } from '@absoluteui/angular/layout';

@Component({
  selector: 'app-dashboard',
  imports: [AuiStack, AuiGrid],
  template: `
    <div auiStack [gap]="6">
      <h2>Projects</h2>
      <hr class="aui-divider" />
      <div auiGrid columns="auto" minColumnWidth="14rem" [gap]="4">
        @for (p of projects; track p) { <div>{{ p }}</div> }
      </div>
    </div>
  `,
})
export class DashboardComponent {
  readonly projects = ['Alpha', 'Beta', 'Gamma'];
}

[auiStack]

Class AuiStack; template reference #ref="auiStack".

Angular bindings for layout primitives. They style the host in place; children stay Angular-managed. The CSS classes (aui-stack, aui-grid, …) also work directly.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
gap	0 | 2 | 3 | 4 | 5 | 6 | 1 | 8 | 12 | 10		Stack, Flex, Grid: gap step mapped to the space-N token. Defaults to the configured defaultGap.
align	LayoutAlign		Stack, Flex: cross-axis alignment (aui-align-*).

[auiFlex]

Class AuiFlex; template reference #ref="auiFlex".

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
gap	0 | 2 | 3 | 4 | 5 | 6 | 1 | 8 | 12 | 10		Stack, Flex, Grid: gap step mapped to the space-N token. Defaults to the configured defaultGap.
align	LayoutAlign		Stack, Flex: cross-axis alignment (aui-align-*).
justify	LayoutJustify		Flex: main-axis distribution (aui-justify-*).
wrap	boolean	true	Flex: wrap items onto new lines (false adds aui-flex–nowrap).
flexDirection	"row" | "row-reverse"	'row'	Flex: row follows the writing direction; row-reverse adds aui-flex–reverse.

[auiGrid]

Class AuiGrid; template reference #ref="auiGrid".

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
columns	GridColumns	'auto'	Grid: fixed column count or responsive auto-fit mode.
minColumnWidth	string	'16rem'	Grid auto mode: minimum column width as a strict CSS length (for example ‘12rem’); sets –aui-grid-min.
gap	0 | 2 | 3 | 4 | 5 | 6 | 1 | 8 | 12 | 10		Stack, Flex, Grid: gap step mapped to the space-N token. Defaults to the configured defaultGap.

[auiContainer]

Class AuiContainer; template reference #ref="auiContainer".

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
size	ContainerSize	'lg'	Container: maximum inline size from container-width-* tokens.