Demonstrating AMP layouts
This page demonstrates the different layouts in AMP, and how they work when a screen is resized.
fill layout, 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 layout, the element retains its fixed dimensions based on the element's width and height attributes (no responsiveness).
fixed-height layout, 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 (e.g.,
flex-item layout, the element and other elements in its parent will take the available space based on the flexbox model.
responsive layout, 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.
intrinsic layout, 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 layout, 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 layout, the element isn't displayed. The element takes up zero space on the screen as if its display style was