Skip to content

Latest commit

 

History

History
52 lines (39 loc) · 2.22 KB

amp-layout.md

File metadata and controls

52 lines (39 loc) · 2.22 KB
Raw

amp-layout

Description A generic, multi-purpose container element that brings AMP's powerful layouts to any element.
Supported Layouts fill, fixed, fixed-height, flex-item, intrinsic, responsive

Overview

The amp-layout component allows you to apply aspect-ratio based responsive layouts to any element. The amp-layout component works similarly to the layout attribute on existing AMP components, but supports any HTML markup as children. Other supported layouts all work with amp-layout (e.g., fixed-height, fixed, etc.).

Example

This example uses amp-layout to create a responsive container around a circle drawn with inline SVG.

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
    Sorry, your browser does not support inline SVG.
  </svg>
</amp-layout>

Attributes

This element includes common attributes extended to AMP components.

Validation

See amp-layout rules in the AMP validator specification.