AMP Conf 2020: Save the date!

Important: this component does not support your currently selected format stories!


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.

Descripción Elemento contenedor genérico y multipropósito que aporta diseños de AMP de gran utilidad
Diseños admitidos container, fill, fixed, fixed-height, flex-item, intrinsic y responsive

Descripción general

El componente amp-layout permite aplicar a cualquier elemento diseños adaptables basados en la relación de aspecto. Funciona de forma similar al atributo layout en los componentes AMP disponibles, pero admite cualquier etiqueta HTML como elemento secundario. Todos los demás diseños admitidos funcionan con amp-layout (por ejemplo, fixed-height, fixed, etc.).


En este ejemplo se utiliza amp-layout para crear un contenedor adaptable alrededor de un círculo dibujado mediante SVG insertado.

<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" />
      Lo sentimos, pero tu navegador no es compatible con SVG insertado.


Este elemento incluye atributos comunes que se aplican a los componentes de AMP.


Consulta las reglas de amp-layout en la especificación de la herramienta de validación de AMP.

¿Necesitas más ayuda?

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