Layout Blocks: Columns, Flex & Groups
- Rachel Klingler
Some blocks are used for formatting. Columns and Flex Groups position content. Groups can be used to add a background color to a section.
- 1 Columns
- 2 Flex Group
- 3 Groups
Columns
Use columns to put items side-by-side. Choose a layout to start.
Click the + button to add content to your columns.
As needed, adjust the width of the columns.
To navigate between items and columns, the arrow keys can be useful.
To add a border to a column, use the Advanced > Additoinal CSS Classes option in the Column Block settings and add border-left or border-right.
Flex Group
A flex group displays items side-by-side. The major difference between flex groups and columns is displayed when there is more than one row of items. If there isn’t a full row, the items on the second row will be centered.
Groups
The Group block allows you to group a set blocks. This can be convenient to move them all together. Groups can also have a background color.
To make an existing set of blocks a group, highlight them, choose the *** menu and chose “Group.”
To set a background color, use the Color Options in the sidebar. Although the background doesn’t appear full width in the editor, it will appear full width on the front side of the website.
