Demonstrating AMP layouts

This page demonstrates the different layouts in AMP, and how they work when a screen is resized.

fill

With a 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

With a fixed layout, the element retains its fixed dimensions based on the element's width and height attributes (no responsiveness).

fixed-height

With a 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., amp-carousel).

flex-item

With a flex-item layout, the element and other elements in its parent will take the available space based on the flexbox model.

responsive

With a 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

With an 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

With a 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

With a nodisplay layout, the element isn't displayed. The element takes up zero space on the screen as if its display style was none.