# How to Use amp-layout in Your AMP Emails

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-layout: Features, Application, and Examples",
  "description": "Features and applications of amp-layout, one of the AMP email components, Use it to create different email layouts in your AMP emails.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1653538002/strapi/Feature_image_Amp_layout_9461009a40.png",
  "datePublished": "2022-03-01T06:55:40.135Z",
  "dateModified": "2025-01-08T06:27:52.580Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-layout: Features, Application, and Examples",
  "description": "Features and applications of amp-layout, one of the AMP email components, Use it to create different email layouts in your AMP emails.",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1653538002/strapi/Feature_image_Amp_layout_9461009a40.png",
  "datePublished": "2022-03-01T06:55:40.135Z",
  "dateModified": "2025-01-08T06:27:52.580Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-layout/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp layout",
      "item": "https://www.mailmodo.com/guides/amp-layout/"
    }
  ]
}
</script>

## Table of contents

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

The AMP framework provides you the flexibility to create various types of layouts in your [AMP emails](https://www.mailmodo.com/guides/amp-for-email/). 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](https://www.mailmodo.com/guides/amp-email-component/) that allows you to create custom layout types in your AMP emails. The [supported layout types](https://amp.dev/documentation/guides-and-tutorials/learn/amp-html-layout/layouts_demonstrated/?format=email) 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](https://www.mailmodo.com/guides/responsive-email-design/) in your [email campaigns](https://www.mailmodo.com/guides/types-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](https://www.mailmodo.com/guides/amp-form/), [amp-autocomplete](https://www.mailmodo.com/guides/amp-autocomplete/), [amp-accordion](https://www.mailmodo.com/guides/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.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

