### File

`packages/components/eui-page/components/eui-page-columns/eui-page-columns.component.ts`

### Description

Column layout container component for eui-page that enables multi-column page structures. Provides responsive column-based layouts with automatic width tracking via ResizeObserver. Supports mobile rendering control to maintain or override responsive column behavior. Emits width changes through a reactive Subject for dynamic layout adjustments. Must be used as a direct child of eui-page to enable column-based page layouts.

### Basic two-column layout

Example :

    <eui-page>
      <eui-page-columns>
        <eui-page-column label="Sidebar">
          <eui-page-column-body>Sidebar content</eui-page-column-body>
        </eui-page-column>
        <eui-page-column label="Main">
          <eui-page-column-body>Main content</eui-page-column-body>
        </eui-page-column>
      </eui-page-columns>
    </eui-page>

### Prevent mobile stacking

Example :

    <eui-page-columns [hasPreventMobileRendering]="true">
      <eui-page-column label="Left">Content</eui-page-column>
      <eui-page-column label="Right">Content</eui-page-column>
    </eui-page-columns>

### Accessibility

- Columns maintain logical reading order for screen readers
- Use semantic HTML within columns for proper document structure
- Ensure keyboard navigation flows naturally through columns

### Notes

- Must be direct child of eui-page component
- Automatically tracks container width for responsive child columns
- By default, columns stack vertically on mobile devices
- Use hasPreventMobileRendering to maintain column layout on all screen sizes

### Implements

`OnInit` `OnDestroy`

### Metadata

changeDetection | `ChangeDetectionStrategy.Default`
encapsulation | `ViewEncapsulation.None`
selector | `eui-page-columns`

template

    <ng-content/>

### Index

###### Properties

- Public width

###### Inputs

- hasPreventMobileRendering

###### HostBindings

- class

###### Accessors

- cssClasses

### Inputs

hasPreventMobileRendering
Type : `boolean`
Default value : `false`
Prevents automatic mobile responsive rendering of columns. When true, maintains desktop column layout on mobile devices instead of stacking. Useful for layouts that should remain columnar regardless of viewport size.

### HostBindings

class
Type : `string`

### Properties

Public width
Type : `unknown`
Default value : `new Subject`

### Accessors

cssClasses
get `cssClasses()`

# results matching ""

# No results matching ""