Demonstrating AMP layouts
This page demonstrates the different layouts in AMP, and how they work when a screen is resized.
filllayout, 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.
fixedlayout, the element retains its fixed dimensions based on the element's width and height attributes (no responsiveness).
fixed-heightlayout, 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-itemlayout, the element and other elements in its parent will take the available space based on the flexbox model.
responsivelayout, 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.
intrinsiclayout, 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.
containerlayout, the element lets its children define its size, much like a normal HTML
divtag. The element is assumed to not have specific layout itself but only acts as a container.
nodisplaylayout, the element doesn't displayed. The element takes up zero space on the screen as if its display style was