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.

Deskripsi Elemen container serbaguna generik yang menghadirkan tata letak AMP yang canggih ke semua elemen.
Tata Letak yang Didukung container, fill, fixed, fixed-height, flex-item, intrinsic, responsive


Komponen amp-layout memungkinkan Anda menerapkan tata letak responsive berbasis rasio tinggi lebar ke semua elemen. Komponen amp-layout berfungsi dengan cara yang mirip untuk atribut layout pada komponen AMP yang ada, tetapi mendukung semua markup HTML sebagai turunan. Tata letak lain yang didukung semuanya dapat digunakan dengan amp-layout (misalnya, fixed-height, fixed, dll.).


Contoh ini menggunakan amp-layout untuk membuat container responsif di sekitar lingkaran yang digambar dengan SVG inline.

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


Elemen ini mencakup atribut umum yang diperluas ke komponen AMP.


Lihat aturan amp-layout dalam spesifikasi validator AMP.

Perlu bantuan lainnya?

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