You're viewing help content for version:

AEM allows you to realize a Responsive Layout for your pages by using the Layout Container component.

This provides a paragraph system that allows you to position components within a responsive grid. This grid can rearrange the layout according to the device/window size and format. The component is used in conjunction with the Layouting mode, which allows you to create and edit your responsive layout dependent on device.

The layout container:

  • Provides horizontal snap to grid, together with the ability to place components into the grid side-by-side and define when they should collapse/reflow.
  • Uses pre-defined breakpoints (e.g. Phone, Tablet, etc.) to allow you to define the required behavior of content for related devices/orientation. For example, you can customize the component size or whether the component can be seen on specific devices.
  • Can be nested to realize column control.

The user can then see how the content will be rendered for specific devices using the Emulator.

Depending on your instance it can be used as the default paragraph system for the page, or as a component available to be dropped onto your page (or both).


Although the Layouting container component is available in the classic UI, its full functionality is only available in the touch-optimized UI.

AEM realizes responsive layout for your pages using a combination of mechanisms:

  • Layout Container component
    This component is available in the component browser and provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can also be set as the default paragraph system on your page.
  • Layouting Mode
    Once the layout container is positioned on your page you can use the Layouting mode to position content within the responsive grid.
  • Emulator
    This allows you to create and edit responsive websites that rearrange the layout according to device/window size by resizing components interactively. The user can then see how the content will be rendered using the Emulator.

With these responsive grid mechanisms you can:

  • Use breakpoints to define differing content layouts based on device width (related to device type and orientation).
  • Use these same breakpoints and content layouts to ensure that your content is responsive to the size of the browser window on the desktop.
  • Use horizontal snap to grid (place components into the grid, resize as required, define when they should collapse/reflow to be side-by-side or above/below).
  • Hide components for specific device layouts.
  • Realize column control.

Depending on your project, the Layout Container might be used as the default paragraph system for your pages, as well as being available (as a component that you can add to the page) for selection from the component browser.


Use of the above mechanisms is enabled by configuration on the template. See Configuring Responsive Layouting for further information.

Layout Definitions, Device Emulation and Breakpoints

When you are creating your website content you want to ensure that your content is displayed appropriate to the device being used to view it.

AEM allows you to define layouts dependent on the width of the device:

  • The emulator enables you to emulate these layouts on a range of devices. As well as the device type, the orientation, selected by Rotate device, can impact the breakpoint selected as the width changes.
  • Breakpoints are the points which separate the layout definitions.
    • They effectively define the maximum width (in pixels) of any device using a specific layout.
    • The breakpoints are usually valid for a selection of devices, dependent on the width of their displays.
    • The range of a breakpoint extends left until the next breakpoint.
    • You cannot select the breakpoint specifically, selecting a device and orientation will automatically select the appropriate breakpoint.

The device Desktop which does not have a specific width and relates to the default breakpoint (i.e. everything above the last configured breakpoint).


It would be possible to define breakpoints for every individual device, but this would drastically increase the effort required for layout definition and maintenance.

When (using the emulator) you select a specific device for emulation and layout definition, the related breakpoint will be highlighted too. Any layout changes that you make will be applicable for other devices that the breakpoint applies to; i.e. any devices positioned to the left of the active breakpoint marker, but before the next breakpoint marker.

For example, when you select the device iPhone 6 Plus (defined with width 540 pixels) for emulation and layout, the breakpoint Phone (defined as 768 pixels) will be activated too. Any layouting changes you make for the iPhone 6 will be applicable to other devices under the Phones breakpoint, such as iPhone 5 (defined as 320 pixels).


Selecting a Device to Emulate

  1. Open the required page for editing. For example:


  2. Select the Emulator icon from the top toolbar:

  3. The emulator toolbar will open. From here you can:

    • Rotate device
    • Select a specific device from the markers.
  4. To select a specific device to emulate you can either:

    • Use the drop down selector.
    • Tap/click on the device indicator in the emulator toolbar.
  5. Once a specific device has been selected you can:

    • See the active marker for the selected device; e.g. iPad
    • See the active marker for the appropriate breakpoint; e.g. Tablet
    • See the dotted line that represents the fold for the current device; e.g. iPhone 5:
    • The fold can also be considered the page line break (not to be confused with the breakpoints) for the content. This is displayed for convenience to show what part of the content the user will see on the device before scrolling.
    • The line for the fold will not be shown if height of the device being emulated is higher than the screen size.

Adding a Layout Container and its Content (Edit mode)

A Layout Container is a paragraph system that:

  • contains other components
  • you can use to define the layout
  • will be responsive to changes


If not already available, the Layout Container must be explicitly activated for a paragraph system/page (for example, by using Design mode).

  1. The Layout Container is available as a standard component in the Components Browser. From here you can drag it to the required location on the page - you will then see the Drag Components here placeholder.

  2. You can then add components to the layout container. These components will hold the actual content:


Selecting and Taking Action on a Layout Container (Edit mode)

As with other components you can select, then take action (Copy, Cut, Delete) on a Layout Container (when in Edit mode):


As a layout container is a paragraph system, deleting the component will delete both the layout grid and all the components (and their content) held within the container.

  1. If you mouseover the grid placeholder, you will need to select the Parent:

  2. If the layout component is nested you will need to select the specific instance that you want to take action on (when you mouse over the options, a black border will indicated the selection on the page):

  3. This will highlight the entire grid with its content. The component toolbar will be shown, from here you can select an action; for example Delete:


Defining Layouts (Layouting mode)


You can define a separate layout for each breakpoint (as determined by emulated device type and orientation).

To configure the layout of a responsive grid implemented with the Layout Container you need to use the Layouting mode. From here you can perform various actions on a grid:

  • Resize the content components using the blue dots. Resizing will always snap-to-grid. When resizing the background grid will be shown to aid alignment:



    Proportions and ratios will be maintained when components such as Images are resized.

  • Click/tap on a content component, the toolbar allows you to:

    • Parent
      Allows you to select the entire layout container component for taking action on the whole.
    • Float to new line
      The component will be moved to a new line, dependent on the space available within the grid.
    • Hide component
      The component will be made invisible (it can be restored from the toolbar of the layout container).
  • In Layouting mode you can tap/click on the Drag components here to select the entire component. This will show the toolbar for this mode; for example:

    • Parent
      Select the parent component.
    • Show hidden components
      Reveal all or individual components. The number indicates how many hidden components there currently are.
      The indicator in the following example shows that there is one hidden component (the top text component).
    • Revert breakpoint layout
      Revert to the default layout. This means that no customized layout will be imposed.
    • Float to new line
      Move the component up a position if spacing allows.
    • Hide component
      Hide the current component.


    In the above example the float and hide actions are available because this Layout Container is nested within a parent Layout Container.

    • Unhide components
      Select the parent components to show how many hidden components it contains; for example, two:

    You can then restore the hidden components by selecting Restore all: