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