How to Use amp-layout in Your AMP Emails

Suryanarayan Pal
BySuryanarayan Pal

3 mins read

The AMP framework provides you the flexibility to create various types of layouts in your AMP emails. And the amp-layout is used to achieve layout construction in AMP emails.

This guide will discuss what amp-layout is and different ways to use it in your AMP emails.

  • What is amp-layout?

  • Features of amp-layout

  • Applications of amp-layout

  • Wrapping up

What is amp-layout?

The amp-layout is an AMP email component that allows you to create custom layout types in your AMP emails. The supported layout types include: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive, container.

With the help of these components, you can create layouts that adjust according to the user's device screen size or stay fixed no matter the screen size or follow the flexbox model and more.

Features of amp-layout

Here are some notable features of amp-layout:

✅ Make elements to fill all the available space

If you want your elements to fill the entire available space, add the fill attribute to their parent container. Now the elements will fill their parent container, both horizontally and vertically, in your AMP emails.

✅ Create fixed elements

Instead of filling up all the available space, you may want your elements to maintain their exact size in your AMP emails. For such scenarios, you have to use the fixed layout type. This will make your elements keep their size without any support for responsiveness.

✅ Add any HTML markups

If you’re familiar with the HTML and its tags, you can use those in the amp-layout. For example, you can include the <img> tag to add images or use the <b></b> tags to bold text content. You can also include SVG elements to draw diagrams that don’t pixelate with changes in screen size.

Applications of amp-layout

Here are some scenarios where you can use the amp-layout:

1. Create responsive email layouts

Incorporating responsive email design in your email campaigns is a great way to make your emails more accessible and adaptable to different devices, screen sizes, and email clients. For example, the responsive layout type allows elements to take available space and resize their height as per their aspect ratio.

2. Rearrange layout elements

If multiple elements are placed in a horizontal layout, they may not look good if the screen size shrinks too much. To tackle this, you can use the container attribute and set it up so that it will rearrange items from that horizontal layout and shift them to the bottom. This makes your email layout cleaner and hence better experience for your users.

Wrapping up

There is a lot of room for experimenting with email layouts, and amp-layout gives you the tools to create different layouts.

If you’re curious about the other AMP components, then check out our guides on amp-form, amp-autocomplete, amp-accordion. These components help you create things like interactive survey forms, custom accordion layouts, autocompleting text fields that make your AMP emails more appealing.

What should you do next?

You made it till the end! Here's what you can do next to grow your business:

2_1_27027d2b7d
Get smarter with email resources

Free guides, ebooks, and other resources to master email marketing.

1_2_69505430ad
Do interactive email marketing with Mailmodo

Send forms, carts, calendars, games and more within your emails to boost ROI.

3_1_3e1f82b05a
Consult an email expert

30-min free email consultation with an expert to fix your email marketing.

Table of contents

chevron-down
What is amp-layout?
Features of amp-layout
Applications of amp-layout
Wrapping up

Fresh Marketing Ideas, Every Week.

Get the latest marketing roundup & news

Get 3X email conversion
with Mailmodo

Check.svg

Create & send interactive emails without coding

Check.svg

Put revenue on auto-pilot with pre-built journeys

Check.svg

Save time with AI-powered email content creation

Experience world’s only interactive email marketing platform

Trusted by 10000+ brands

Group_1110166020_1_6fb9f2bd9a
Group_1110165532_1_bf39ce18b3
Ellipse_Gradientbottom_Bg
Ellipse_GradientLeft_Top
gradient_Right