The Canvas follows a Responsive Grid that actively arranges all of the elements dragged onto the Canvas in a way that they display correctly under different Viewport widths and heights.

• Any element dragged on to the canvas will sit inside an auto-generated Column.
• Columns lie within Rows, Rows within Containers, Containers within Sections, and finally, Sections lie within the single Page Body. This hierarchy is illustrated below:

Page Body → Section → Container → Row → Column → Element

• Columns create gutters (gaps between Column content).
• Columns are stacked for mobile-device views.

Containers

• You can control your content width from one Section of your Page to another using the Container that sits within each of those Sections.
• You can choose to expand a Container to the borders of Section by changing the Padding within the Section so that the Container expands to fill the additional space within the Section.
• You could also add custom backgrounds to Containers to make them distinguishable from the wider Section background. 

Sections

• Sections break the contents of your page into distinct blocks and generally occupy the full width of the Page Body.
• You can use Sections to create a sequence of different content groups on your Page.
• New Sections can also be inserted through the Block Explorer.
• Sections can also be moved up and down the sequence on the Page using Cut and Paste actions.
• Sections generally expand all the way to the Page Body width. 
• You, however, change the Section width to be narrower than the Body width to create an additional gutter for your content.
• This gutter will be over and above the default gutter that sits between the Container border and the Section border.

Have more questions? Visit our community, its open to everyone!