Layout Container & Responsive Grid

Content Objective

• What is a layout in AEM?
• Types of layouts
• Understanding Layout Containers
• How Layout Containers work
• Layout Policies and configurations
• Creating responsive page layouts
• Real production scenarios

The Journey So Far

In the previous chapters, we've built a complete understanding of AEM templates:

• Chapter 7: How components work together to form complete pages
• Chapter 8: How templates define page blueprints and governance

You now understand:

• Template types and creation
• Structure vs Initial Content tabs
• How templates store and apply rules

Now let's explore how pages become responsive and adaptable across different screen sizes.

This is where Layout Containers come in.

They enable authors to create layouts without touching code.

What is the Layout?

In AEM, a layout defines the structure and arrangement of components on a webpage.

A layout ensures:

• Consistent Visual Design — Components are organized the same way across all pages
• Responsive Behavior — Layout adapts to mobile, tablet, and desktop screens
• Flexible Authoring — Authors can arrange components without developer help

Layouts are implemented using Layout Containers and rely on CSS for styling.

Types of Layouts

Fixed Layout

• Width: Fixed pixel value (e.g., 1200px)
• Use Case: Desktop-only sites
• Problem: Doesn't work well on mobile devices
• Example: Older corporate websites designed for desktop

Fluid Layout

• Width: Percentage-based (e.g., 100%)
• Use Case: Adapts to screen width
• Problem: Text can become too wide or too narrow
• Example: Simple responsive layouts

Responsive Layout

• Width: Changes based on breakpoints (mobile, tablet, desktop)
• Use Case: Modern websites with breakpoints
• Problem: Requires CSS media queries and careful planning
• Example: Modern AEM sites with responsive grids

Grid-Based Layout

• Structure: Organized rows and columns (e.g., 12-column grid)
• Use Case: Complex page structures
• Problem: Requires proper column management
• Example: Bootstrap-style layouts in AEM

What is a Layout Container?

A Layout Container is a special AEM component that lets you arrange other components on a page.

Think of it as a flexible container where authors can:

• Drag and drop components into different sections
• Resize components across columns
• Arrange components in multi-column layouts
• Make layouts responsive for different devices

How Does It Work?

Step 1: Authors open the page editor

They see the Layout Container on the page.

Step 2: Authors drag components into sections

They can place text, images, and other components inside.

Step 3: Authors resize and arrange

They can move components around and resize them.

Step 4: Layout automatically adapts

The layout adjusts for mobile, tablet, and desktop automatically.

This enables non-technical authors to create responsive pages without developer involvement.

Layout Container

A Layout Container in AEM is a special component used to create layouts.

Key Characteristics:

• Drag-and-Drop Interface — Authors can easily arrange components
• Multi-Column Support — Supports 1-column, 2-column, 3-column layouts, etc.
• Responsive Grid — Automatically adapts to different screen sizes
• Policy-Driven — Developers can control available columns and spacing through policies

How it Works:

1. Add the Layout Container to a page template
2. Define layout policies (allowed columns, spacing, etc.)
3. Authors drag components into columns
4. Layout Container handles responsiveness automatically

Technical Implementation:

Layout Container
├── Column 1
│   ├── Component A
│   └── Component B
├── Column 2
│   └── Component C
└── Column 3
    └── Component D

When the screen becomes smaller:

• Desktop: 3 columns side-by-side
• Tablet: 2 columns
• Mobile: 1 column (stacked)

Layout Policies

Layout Policies define how the Layout Container behaves and what options are available to authors.

Policies control:

Allowed Column Configurations

Restrict authors to specific layouts:

• 1-column layout (full width)
• 2-column layout (50/50 or 60/40)
• 3-column layout (33/33/33)
• 4-column layout (25/25/25/25)

Spacing and Padding

Define spacing between components:

• Column gap (space between columns)
• Padding inside columns
• Margins around the container

Responsive Breakpoints

Define how layout behaves on different devices:

• Desktop: 3 columns
• Tablet: 2 columns
• Mobile: 1 column

Background and Styling

• Allow background images or colors
• Allow custom CSS classes
• Define text alignment options

Nested Containers

Allow or restrict nested Layout Containers:

• Allow nesting: Authors can place Layout Containers inside other Layout Containers
• Restrict nesting: Prevents complex, hard-to-manage structures

Real Production Scenario

Situation:

Your marketing team wants to create a landing page with:

• Desktop: 3 columns (Hero, Features, CTA)
• Tablet: 2 columns (Hero spans both, Features and CTA below)
• Mobile: 1 column (All stack vertically)

Using Layout Container:

1. Template author creates 3-column policy
2. Page author drags components into Layout Container
3. Layout Container automatically adapts for all devices
4. Result: Responsive page without any code

Without Layout Container:

Authors would need to:

• Create 3 separate page templates (one for each device)
• Manually update CSS
• Requires developer involvement
• Result: Wasteful and inflexible

How Authors Use Layout Containers

Step 1: Enter Edit Mode

Author opens a page using a template with Layout Container.

Step 2: Select Layout

Author clicks on Layout Container and selects desired columns:

• 1 column (full width)
• 2 columns (50/50)
• 3 columns (33/33/33)

Step 3: Drag Components

Author drags components (text, image, button) into columns.

Step 4: Resize (Optional)

Author can resize individual columns by dragging the column divider.

Step 5: Preview Responsive

Author previews the page on mobile/tablet to ensure layout works.

Key Takeaways

• Layouts define the structure of how components are arranged on pages
• Layout Containers enable drag-and-drop page building for non-technical authors
• Responsive layouts adapt to mobile, tablet, and desktop automatically
• Layout Policies control available columns, spacing, and breakpoints
• Grid-based layouts organize components into rows and columns
• Multi-column support enables complex page structures
• Responsive breakpoints ensure pages work on all devices
• Layout Containers reduce developer dependency for page layout changes

What Happens Next?

In this chapter, we learned how Layout Containers enable responsive page layouts without code.

Now that you understand how pages are structured and made responsive, you're ready to learn about styling variations and design consistency.

The next chapter explores:

• Chapter 10: Style System — How to apply reusable styles to components without creating duplicate components

You now have the complete knowledge of how AEM pages are created, structured, and made responsive for modern web delivery.