# EuiPageColumns

**Type:** component



Container for multiple page columns that provides responsive column layouts with resize observation.
Automatically monitors width changes to support responsive column behavior.

### Basic usage
```html
<eui-page-columns>
  <eui-page-column label="Navigation">Nav content</eui-page-column>
  <eui-page-column label="Main">Main content</eui-page-column>
</eui-page-columns>
```

### Prevent mobile rendering
```html
<eui-page-columns [hasPreventMobileRendering]="true">
  <eui-page-column>Content</eui-page-column>
</eui-page-columns>
```

### Accessibility
- Ensure columns have descriptive labels for screen readers
- Maintain logical reading order in column sequence
- Test keyboard navigation between columns

### Notes
- Uses ResizeObserver to track container width changes
- Child columns can respond to width changes for auto-collapse behavior
- `hasPreventMobileRendering` disables mobile-specific column stacking


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

## Inputs
- **hasPreventMobileRendering**: `boolean` -