All Collections
Blocks
Row & Column Blocks
Row & Column Blocks

Learn how to use Frontly's Row and Column layout blocks to organize content into responsive horizontal rows and vertical columns

Patrick avatar
Written by Patrick
Updated over a week ago

For a more simple and defined approach to formatting your blocks, click here to read our article on the classic Layout block.

This article talks about how to use our horizontal Row and vertical Column to create advanced responsive layouts with nested Rows and Columns:


Row Block

Imagine you've added multiple Button blocks to a page. By default, every block at the root level of your page takes up 100% width and they'll stack up like this:

Most likely, this is not what you want.

Instead, you can add a 'Row block' to organize your content into a horizontal row:

The best part? Rows are responsive, meaning they'll automatically move items to the next line when the screen size is smaller:

You can adjust the Spacing in pixels between the row items (the default is 20px):
โ€‹


A row with 100px spacing between items:


Choosing Alignment

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

No matter what you choose, the Row will be responsive on different screen sizes.

Need to stack items vertically, inside a Row? Try the Column block.



Column Block

You can nest Rows and Columns inside each other.

A Row with 3 buttons and then a Column with 3 buttons inside the Row:

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


Drag To Re-Order

Need to re-arrange the order of the blocks inside a Row or Column? Just drag them around in the 'Blocks' section of the sidebar:

Did this answer your question?