Documentation
Components

Container

Containers are one of core components in Paper and they are truly powerful. They are used to create horizontal and vertical lists, grids of any items and scrollable lists.

They are also the core component when it comes to responsive design using Tablet Overrides.

Containers display nothing by default (unless you specify a property such as a background color).

They are used to hold other elements (you can think of them as a group of elements) and control how they are laid out in the screen.

For example, a vertical list of chat conversations is nothing more than a Container with a Vertical orientation.

A 3 column grid is a Container with a Horizontal orientation, that Wraps its contents and has 3 items per row.

Containers can place their items one next to each other (horizontally or vertically) or on top of each other (stacked).

Container Properties

Appearance

Content colorThe color to apply to any Text or Icons within the container.

Layout

OrientationThe direction of the items in the container.
AlignmentHow items are lined up inside the container on the main axis.
ArrangementHow items are organized in the container on the opposite axis.
SpacingThe space between items in the container.
Wrap ContentsWhether items move to a new line or column when there's no more space in the container.
Items per Column/Row(Requires Wrap) How many items fit in each column or row of the container.
Scroll DirectionThe direction in which you can scroll within the container.

Designing responsive Containers

Learn more about Tablet Design