---
schema_version: "1"
id: dbf23c25a61a04b694d41256785805307325cc5a445588d52d7d6c010007fd4a
title: Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/aura-platform/guides/aura/components/components-config-for-app-builder-width-aware.md
canonical_url: https://developer.salesforce.com/docs/platform/aura-platform/guide/components-config-for-app-builder-width-aware.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: c6ecae7cd247316868b976bb62f56a2f9c3fa5842909e7d8a1b5af6b0cfabf69
products:
  - Lightning Aura Components Developer Guide
  - Platform Developer Content
---

# Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo

When you add a component to a region on a page in the Lightning App Builder, the `lightning:flexipageRegionInfo` sub-component passes the width of that region to its parent component. With `lightning:flexipageRegionInfo` and some strategic CSS, you can tell the parent component to render in different ways in different regions at runtime.

For example, the List View component renders differently in a large region than it does in a small region as it’s a width-aware component.

![List view in large and small regions](https://developer.salesforce.com/media/aura-platform/lab_width_aware_comps.png)

Valid region width values are: `Small`, `Medium`, `Large`, and `Xlarge`.

You can use CSS to style your component and to help determine how your component renders. Here’s an example.

This simple component has two fields, field1 and field2. The component renders with the fields side by side, filling 50% of the region’s available width when not in a small region. When the component is in a small region, the fields render as a list, using 100% of the region’s width.

```nolang
<aura:component implements="flexipage:availableForAllPageTypes">
    <aura:attribute name="width" type="String"/>
    <lightning:flexipageRegionInfo width="{!v.width}"/>
    <div class="{! 'container' + (v.width=='SMALL'?' narrowRegion':'')}">
        <div class="{! 'eachField f1' + (v.width=='SMALL'?' narrowRegion':'')}">
            <lightning:input name="field1" label="First Name"/>
        </div>
        <div class="{! 'eachField f2' + (v.width=='SMALL'?' narrowRegion':'')}">
            <lightning:input name="field2" label="Last Name"/>
        </div>
    </div>
</aura:component>
```

Here’s the CSS file that goes with the component.

```nolang
.THIS .eachField.narrowRegion{
    width:100%;
}
.THIS .eachField{
    width:50%;
    display:inline-block;
}
```