Something went wrong while trying to load more search results.
We apologize for the inconvenience caused.
Please try again later.


Something went wrong…

…while trying to load the search results.
We apologize for the inconvenience caused.
Please try again later.


Description A generic, multi-purpose container element that brings AMP's powerful layouts to any element.
Supported Layouts container, fill, fixed, fixed-height, flex-item, intrinsic, responsive


The amp-layout component allows you to apply aspect-ratio based responsive layouts to any element. The amp-layout component works similarly to the layout attribute on existing AMP components, but supports any HTML markup as children. Other supported layouts all work with amp-layout (e.g., fixed-height, fixed, etc.).


This example uses amp-layout to create a responsive container around a circle drawn with inline SVG.

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
    Sorry, your browser does not support inline SVG.


This element includes common attributes extended to AMP components.


See amp-layout rules in the AMP validator specification.

Need more help?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub