Working with Group and Element Size in Flow

The power of a Flow page is that your content layout can switch from horizontal to vertical at different breakpoints. This means you can create experiences that better-serve your learners across different devices and browser widths. 

Of course, if you're using Flow already, you already know this.

What’s less-known is how this switch from horizontal to vertical is actually carried out. And understanding this can open up a range of control over responsive layout behavior as well as layout design options for you.

Here’s an example of how that works.

In Flow, width is measured in 12ths.  You can think of a Row, for example, as having up to 12 columns in its width.

If the Row has two Groups in it arranged horizontally and they’re each half the width of the Row then each of the groups’ width is set to be 6/12ths of the available width in the Row.

A size in widths can be set for each of the Breakpoints. 

You can see this using the Size tool. In this example, we have two Groups in the same Row:

• Body Text Group
• Tabset Group

At the Medium breakpoint we’ve selected the Body Text Group then selected its Size option. 

You can see below that for the three widest breakpoints the Group’s size is set to be 6/12ths of the available Row width. But for the Extra Small Breakpoint, the width is set to be 12/12ths, or the full width of the Row. (And if you selected the Tabset Group you would see that it has the same settings on its Size panel.)

At the three widest Breakpoints, each group is set to 6/12ths wide.

Since 6+6=12, there is space available in the Row’s width for them to sit beside each other horizontally in the Row. (Another way to describe this is that together they fill the full 12/12ths available in the Row so they fit beside each other in that available width.)

At the Extra Small Breakpoint, the Body Text Group is now set to be 12/12ths, so there is no space available for the Tabset Group to sit beside it in the Row.

As a result, the Tabset Group gets pushed down below the Body Text Group, creating a vertical layout. And the Body Text Group is also set to be 12/12ths at the Extra Small Breakpoint, so it also fills the full width of the Row.

This example uses the Group Size controls to control responsive behavior within the Row. 

The same strategy also applies to Groups that have more than one Element in them as well as within Engage Components like Tabsets, Accordion Menus, Content Carousels, etc.

Most of the time, you won’t need to do anything with the Size settings. The default Layouts are set up with sensible responsive behaviors.

You’ll typically only need to use the Size Controls when you want to customize the default responsive behavior or use them to help you create unique content layouts.

Here are some examples.