Containers and Sections
Last updated - December 13, 2019
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.
- 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 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.
Was this article helpful?
Have more questions? Visit our community, its open to everyone!