|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|
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. </svg> </amp-layout>
This element includes common attributes extended to AMP components.
See amp-layout rules in the AMP validator specification.
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 OverflowFound 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