AMP Layout System

The AMP Layout System relies on a set of attributes such as layout, width, height, sizes and heights to express the element's layout and sizing needs.

layout

AMP provides a set of layouts that specify how an AMP component behaves in the document layout. If no value is specified, the layout for the component is inferred as follows:

• If height is present and width is absent or is set to auto, a fixed-height layout is assumed.
• If width and height are present along with a sizes or heights attribute, a responsive layout is assumed.
• If width and height are present, a fixed layout is assumed.
• if width and height are absent, a container layout is assumed.

fill

The element takes the space available to it - both width and height. In other words, the layout and size of a fill element matches its parent.

fixed

The element retains its fixed dimensions based on the element's width and height attributes. This layout has no responsiveness supported. The width and height attributes must be present.

fixed-height

The element takes the space available to it but keeps the height unchanged. This layout works well for elements that need to position content horizontally (for example, amp-carousel). The height attribute must be present. The width attribute must not be present or must be equal to auto.

flex-item

The element and other elements in its parent will take the available space based on the flexbox model. The width and height attributes are not required.

responsive

The element takes the space available to it and resizes its height automatically to the aspect ratio specified by the element's width and height attributes. The width and height attributes must be present.

intrinsic

The element takes the space available to and resizes its height automatically to the aspect ratio given by the width and height attributes until it reaches the element's natural size or reaches a CSS constraint.

container

The element lets its children define its size, much like a normal HTML div tag. The element is assumed to not have specific layout itself but only acts as a container.

nodisplay

The element doesn't displayed. The element takes up zero space on the screen as if its display style was none. The width and height attributes are not required.

width and height

Depending on the value of the layout attribute, AMP component elements must have a width and height attribute that contains an integer pixel value. Actual layout behavior is determined by the layout attribute.

sizes

All AMP elements that support the responsive layout, also support the sizes attribute. The sizes attribute describes how the width of the element is calculated depending on the media conditions.

When the sizes attribute is specified along with width and height, the layout is defaulted to responsive.

heights

All AMP elements that support the responsive layout, also support the heights attribute.

When the heights attribute is specified along with width and height, the layout is defaulted to responsive.