Type: Layout

CSS Enabled: ✅

On their own, every block at the root level of your page takes 100% width of your editor and they'll stack below one another. This article shows how to use our horizontal Row and vertical Column to create responsive layouts with nested Rows and Columns. Read on to see and learn more!

Row or Column blocks can be viewed as containers. Depending on how you want to orient your page content, you can use these containers to arrange your blocks horizontally or vertically with row and column blocks, respectively.

Adding one to your page will display an empty container as shown below.

Once the block is selected, you can place blocks into it from the block settings on the left panel or through the block selector at the top of your app editor.

Below are some blocks that have been arranged side by side in a row block. In order to adjust their ordering, you can click and drag them from the block overview in the 'Blocks' section.

If you would prefer to arrange your blocks into a column instead, you can quickly switch between formats by clicking the 'Switch to Column / Row' button.

To remove a specific block from a layout block without deleting it, there are two ways to do it.

From the block hierarchy within your page settings, hovering your mouse cursor over the individual block will present a 'Remove from layout' function for you to click.

For a more sophisticated UI for your content blocks, you can nest row and column blocks within each other too!

In the example below, you have a row block with a column block nested inside it next to a Placeholder block. Inside this nested column block are two placeholders blocks. This is a relationship you can see from the block hierarchy in the left settings panel as well.

This is one small way you can elevate the designs of your pages, and can get increasingly more complex with them as you go deeper into the layers of rows and columns blocks! Experiment with the space you have and see what block layouts works best for your app!

Row and columns are some of the most versatile blocks in Frontly. Here are some of their key styling settings!

In addition to the ability to select a background colour, you can set the row and column background as an image as well!

Use this to overlay your elements to create even more dynamic and personalized blocks!

You can adjust the Spacing in pixels between each item (the default is 20px):
​

Below is a row with 100px spacing between items:

Static spacing is fine, but what about something more sophisticated? Try our Horizontal Alignment and Vertical Alignment settings to determine how your blocks should be aligned within the Row:

Horizontal Alignment: Space Between

Horizontal Alignment: Space Around

Horizontal Alignment: Align Right

Columns also have a left, centre and right Horizontal Alignment settings, allowing you to force items to a specific side or centre of the available space:

Clicking the 'Allow Row Wrapping' in any row block will ensure the blocks inside them are responsive to different screen sizes. Blocks that are typically displayed in a continuous row will dynamically move down a line if its contents aren't able to fit the width of the screen.

On desktop:

On mobile:

Blocks inside of a row or column block can be prescribed a static width or height, but can also be given the flexibility to fill whatever space remains horizontally, depending on the screen size.

In the below example, both the Image and Text block have been originally been set with static dimensions.

After clicking on the 'Fill Remaining Space' toggle for the text block, its width automatically increases to fill the leftover space, creating a more dynamic UI that makes better use of the available space on the page.

Before:

After: