Do you build things with AMP? Fill out the AMP Developer Survey!


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.

Descrição Um elemento de contêiner genérico e multifuncional que permite adicionar os layouts avançados de AMP a qualquer elemento.
Layouts compatíveis container, fill, fixed, fixed-height, flex-item, intrinsic, responsive

Visão geral

O componente amp-layout permite aplicar a qualquer elemento layouts responsivos com base na proporção. O componente amp-layout funciona de maneira semelhante ao atributo layout em componentes AMP existentes, mas aceita qualquer marcação HTML como filha. Todos os outros layouts compatíveis funcionam com amp-layout (por exemplo, fixed-height, fixed etc.).


Este exemplo usa o amp-layout para criar um contêiner responsivo em torno de um círculo desenhado com SVG in-line.

<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.


Este elemento inclui atributos comuns estendidos a componentes de AMP.


Consulte as regras de amp-layout (link em inglês) nas especificações do validador de AMP.

Precisa de mais ajuda?

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.

Ir para 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.

Ir para o GitHub