Layout - Layout Containers

Layout and Containers

Use the layout directive on a container element to specify the layout direction for its children: horizontally in a row (layout="row") or vertically in a column (layout="column"). Note that row is the default layout direction if you specify the layout directive without a value.

row Items arranged horizontally. max-height = 100% and max-width is the width of the items in the container.
column Items arranged vertically. max-width = 100% and max-height is the height of the items in the container.

Layout Directive
First item in row
Second item in row
First item in column
Second item in column

Note that layout only affects the flow direction for that container's immediate children.


Layouts and Responsive Breakpoints

As discussed in the Layout Introduction page you can make your layout change depending upon the device view size by using breakpoint alias suffixes.

To make your layout automatically change depending upon the device screen size, use one to the following layout APIs to set the layout direction for devices with view widths:

API Device width when breakpoint overrides default
layout Sets default layout direction unless overridden by another breakpoint.
layout-xs width < 600px
layout-gt-xs width >= 600px
layout-sm 600px <= width < 960px
layout-gt-sm width >= 960px
layout-md 960px <= width < 1280px
layout-gt-md width >= 1280px
layout-lg 1280px <= width < 1920px
layout-gt-lg width >= 1920px
layout-xl width >= 1920px

For the demo below, as you shrink your browser window width notice the flow direction changes to column for mobile devices (xs). And as you expand it will reset to row for gt-sm view sizes.

Responsive Layouts
I'm above on mobile, and to the left on larger devices.
I'm below on mobile, and to the right on larger devices.

See the Layout Options page for more options such as padding, alignments, etc.