# EuiPageColumnsComponent

**Type:** component

<p>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.</p>
<h3>Basic two-column layout</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page&gt;
  &lt;eui-page-columns&gt;
    &lt;eui-page-column label=&quot;Sidebar&quot;&gt;
      &lt;eui-page-column-body&gt;Sidebar content&lt;/eui-page-column-body&gt;
    &lt;/eui-page-column&gt;
    &lt;eui-page-column label=&quot;Main&quot;&gt;
      &lt;eui-page-column-body&gt;Main content&lt;/eui-page-column-body&gt;
    &lt;/eui-page-column&gt;
  &lt;/eui-page-columns&gt;
&lt;/eui-page&gt;</code></pre></div><h3>Prevent mobile stacking</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-columns [hasPreventMobileRendering]=&quot;true&quot;&gt;
  &lt;eui-page-column label=&quot;Left&quot;&gt;Content&lt;/eui-page-column&gt;
  &lt;eui-page-column label=&quot;Right&quot;&gt;Content&lt;/eui-page-column&gt;
&lt;/eui-page-columns&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Columns maintain logical reading order for screen readers</li>
<li>Use semantic HTML within columns for proper document structure</li>
<li>Ensure keyboard navigation flows naturally through columns</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Must be direct child of eui-page component</li>
<li>Automatically tracks container width for responsive child columns</li>
<li>By default, columns stack vertically on mobile devices</li>
<li>Use hasPreventMobileRendering to maintain column layout on all screen sizes</li>
</ul>


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

**Standalone:** false

## Inputs

- **hasPreventMobileRendering**: `boolean` - <p>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.</p>

