# EuiPageColumnsComponent

**Type:** component



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
```html
<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
```html
<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


**Selector:** `eui-page-columns`

## Inputs
- **hasPreventMobileRendering**: `boolean` - 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.