Skip to main content

Layouts

Superblocks Layouts give you the dynamic power of Flexbox and CSS grid on the web. You can build any dynamic layout while having zero frontend expertise due to the native layout controls in Superblocks.

Superblocks Layouts are useful when you want to achieve:

Sections & Columns​

The layout system is based on Sections and Columns.

  • Section: Full width “rows” that divide a Page.
  • Columns: Columns in a Section span the full height, dividing the space into separate areas. Choose from three layout options for these columns: fixed grid (allowing freeform placement of content), vertical stack, or horizontal stack.
Use sections to divide your application into full width rows

Responsive Layouts​

By default Superblocks apps are responsive. By dividing your Sections into Columns, users can configure the columns to stack vertically on Tablet and Mobile screens automatically at breakpoints.

Dynamic Component Resizing​

By default all components are fixed-height and fixed-width with drag and drop. To achieve a dynamic height or width change the property to “Fit Content”.

This will determine the height based on the data inside. For example if you take a table with 5 rows of data it’ll show those 5 and a table with 20 rows of data will be approximately 4x the height dynamically.

Vertically Stacked Layouts​

A vertical stack means a layout in which elements are arranged one after the other in a vertical sequence.

  • Distribution can be set to Top, Middle, Bottom, and Space Evenly
  • Alignment can be set to: Left, Center, Right, and Stretch
  • Spacing between components controls the vertical space between two adjacent components
  • Padding controls the space between the column and inner components
Use columns to divide your application

Horizontally Stacked Layouts​

A horizontal stack means a layout in which elements are arranged one after the other in a horizontal sequence. Horizontal stacks of columns enable control of space between components, padding, and overflow behavior.

Fixed Header Sections​

Setting a section to “position:fixed” will make it sticky, this is common when building a header that you want to keep as your users scroll down the page.

Fix headers to applications that persist as a users scrolls down the page

Dynamic Hiding and Showing of Components​

When you use a vertical stack or horizontal stack you can set component visibility and to collapse space when not visible. When a component is hidden, all others will move into place as if it’s not there, which is quite powerful when building dynamic views.