# EuiPageColumns

**Type:** component

<p>Container for multiple page columns that provides responsive column layouts with resize observation.
Automatically monitors width changes to support responsive column behavior.</p>
<h3>Basic usage</h3>
<b>Example :</b><div><pre class="line-numbers"><code class="language-html">&lt;eui-page-columns&gt;
  &lt;eui-page-column label=&quot;Navigation&quot;&gt;Nav content&lt;/eui-page-column&gt;
  &lt;eui-page-column label=&quot;Main&quot;&gt;Main content&lt;/eui-page-column&gt;
&lt;/eui-page-columns&gt;</code></pre></div><h3>Prevent mobile rendering</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&gt;Content&lt;/eui-page-column&gt;
&lt;/eui-page-columns&gt;</code></pre></div><h3>Accessibility</h3>
<ul>
<li>Ensure columns have descriptive labels for screen readers</li>
<li>Maintain logical reading order in column sequence</li>
<li>Test keyboard navigation between columns</li>
</ul>
<h3>Notes</h3>
<ul>
<li>Uses ResizeObserver to track container width changes</li>
<li>Child columns can respond to width changes for auto-collapse behavior</li>
<li><code>hasPreventMobileRendering</code> disables mobile-specific column stacking</li>
</ul>


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

**Standalone:** false

## Inputs

- **hasPreventMobileRendering**: `boolean` - 
